import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import type { Tab } from "@/lib/models/product"
import { cn } from "@/lib/utils"

type ProductTabsProps = {
  tabs: Tab[]
  activeId: string
  onTabChange: (id: string) => void
}

export default function ProductTabs({
  tabs,
  activeId,
  onTabChange,
}: ProductTabsProps) {
  return (
    <Tabs value={activeId} onValueChange={onTabChange} className="w-full">
      <TabsList className="grid w-full h-auto bg-transparent p-0 grid-cols-3">
        {tabs.map(tab => (
          <TabsTrigger
            key={tab.id}
            value={tab.id}
            className={cn(
              "w-full h-auto py-2 rounded-full text-sm font-medium transition-all cursor-pointer text-center outline-none border-0 ring-0",
              activeId === tab.id
                ? "bg-linear-to-r from-blue-500 to-cyan-400 text-white! shadow-none"
                : "bg-gray-100 text-gray-600 hover:bg-gray-200",
            )}
          >
            {tab.label}
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  )
}
