"use client"
import { Tabs, TabsList, TabsTrigger, TabsContent as ShadcnTabsContent } from "@/components/ui/tabs"
import { ReactNode } from "react"

export interface TabItem {
  value: string
  label: string
  count?: number
}

interface CustomTabsProps {
  items: TabItem[]
  activeValue: string
  onTabChange: (value: string) => void
  className?: string
  children?: ReactNode
  rightContent?: ReactNode
}

export function CustomTabs({ items, activeValue, onTabChange, className, children, rightContent }: CustomTabsProps) {
  return (
    <Tabs value={activeValue} onValueChange={onTabChange} className={className || "w-full"}>
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0 mb-4">
        <TabsList className="bg-white p-0 flex gap-0 shadow-none rounded-sm w-full sm:w-auto overflow-x-auto sm:overflow-x-visible [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
          {items.map(item => (
            <TabsTrigger
              key={item.value}
              value={item.value}
              className={
                activeValue === item.value
                  ? "bg-primary-gradient text-white font-semibold px-3 sm:px-4 py-2 sm:py-2 shadow-none rounded-sm min-h-10 shrink-0 text-sm sm:text-base"
                  : "bg-transparent text-gradient-start font-semibold px-3 sm:px-4 py-2 shadow-none rounded-sm min-h-10 shrink-0 text-sm sm:text-base hover:bg-gray-50"
              }
            >
              {item.label}
              {typeof item.count === "number" ? ` (${item.count})` : ""}
            </TabsTrigger>
          ))}
        </TabsList>
        {rightContent && <div className="shrink-0">{rightContent}</div>}
      </div>
      {children}
    </Tabs>
  )
}

export const TabsContent = ShadcnTabsContent