'use client'

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Activity, Dna, LineChart, LayoutDashboard } from "lucide-react"

interface NavigationProps {
  cowNo: string
}

const navigationItems = [
  {
    label: '개요',
    href: '',
    icon: LayoutDashboard,
    color: 'slate',
  },
  {
    label: '유전체',
    href: '/genome',
    icon: LineChart,
    color: 'blue',
  },
  {
    label: '유전자',
    href: '/genetics',
    icon: Dna,
    color: 'purple',
  },
  {
    label: '번식능력',
    href: '/reproduction',
    icon: Activity,
    color: 'green',
  },
]

const colorClasses = {
  slate: {
    active: 'border-b-slate-700 text-slate-700',
    icon: 'text-slate-700',
  },
  blue: {
    active: 'border-b-blue-600 text-blue-600',
    icon: 'text-blue-600',
  },
  purple: {
    active: 'border-b-purple-600 text-purple-600',
    icon: 'text-purple-600',
  },
  green: {
    active: 'border-b-green-600 text-green-600',
    icon: 'text-green-600',
  },
}

export function CowNavigation({ cowNo }: NavigationProps) {
  const pathname = usePathname()

  return (
    <div className="bg-white border border-slate-200 rounded-xl shadow-sm sticky top-0 z-10">
      <nav className="flex gap-1 p-1.5 overflow-x-auto scrollbar-hide">
        {navigationItems.map((item) => {
          const href = `/cow/${cowNo}${item.href}`
          const isActive = item.href === ''
            ? pathname === `/cow/${cowNo}`
            : pathname.startsWith(href)

          const Icon = item.icon
          const colors = colorClasses[item.color as keyof typeof colorClasses]

          return (
            <Link
              key={item.href}
              href={href}
              className={cn(
                "flex-shrink-0 flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-all duration-200 rounded-t-lg border-b-2",
                isActive
                  ? colors.active
                  : "border-transparent text-muted-foreground hover:text-foreground"
              )}
            >
              <Icon className={cn("w-4 h-4", isActive && colors.icon)} />
              <span className="whitespace-nowrap">{item.label}</span>
            </Link>
          )
        })}
      </nav>
    </div>
  )
}
