'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'

export interface TabItem {
  href: string
  label: string
}

interface TabNavProps {
  tabs: TabItem[]
  className?: string
}

export function TabNav({ tabs, className }: TabNavProps) {
  const pathname = usePathname()

  return (
    <div className={cn('flex border-b bg-white sticky top-0 z-10', className)}>
      {tabs.map((tab) => {
        const isActive = pathname === tab.href || pathname.startsWith(tab.href + '/')

        return (
          <Link
            key={tab.href}
            href={tab.href}
            className={cn(
              'flex-1 py-3 px-4 text-center text-sm font-medium border-b-2 transition-colors',
              isActive
                ? 'border-primary text-primary'
                : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/20'
            )}
          >
            {tab.label}
          </Link>
        )
      })}
    </div>
  )
}