import React from 'react'
import { Link } from '@inertiajs/react'

export default function AnalyticsNav({ items = [] }) {
  if (!items.length) return null

  const pathname = typeof window !== 'undefined' ? window.location.pathname : ''

  return (
    <div className="flex flex-wrap gap-2">
      {items.map((item) => {
        const active = pathname === item.href

        return (
          <Link
            key={item.href}
            href={item.href}
            className={`rounded-full border px-4 py-2 text-sm font-semibold transition ${active ? 'border-sky-300/25 bg-sky-300/12 text-sky-100' : 'border-white/[0.08] bg-white/[0.04] text-slate-300 hover:border-white/15 hover:bg-white/[0.06] hover:text-white'}`}
          >
            {item.label}
          </Link>
        )
      })}
    </div>
  )
}