import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';

interface ChromeTab {
    id: string;
    label: string;
    count?: number;
}

interface ChromeTabsProps {
    tabs: ChromeTab[];
    active: string;
    onChange: (id: string) => void;
    className?: string;
}

export function ChromeTabs({
    tabs,
    active,
    onChange,
    className,
}: ChromeTabsProps) {
    return (
        <Tabs
            value={active}
            onValueChange={onChange}
            className={cn('flex flex-col gap-0', className)}
        >
            <TabsList
                variant="line"
                className="flex h-auto w-fit items-end gap-0.5 rounded-none p-0"
            >
                {tabs.map((tab) => (
                    <TabsTrigger
                        key={tab.id}
                        value={tab.id}
                        className={cn(
                            'group/tab flex h-auto w-fit flex-none cursor-pointer items-center gap-2 rounded-t-[12px] rounded-b-none border-0! px-6 pt-2.5 pb-2.5',
                            'bg-slate-200! text-xs font-bold text-slate-500',
                            'transition-all duration-200 select-none',
                            'hover:bg-slate-300! hover:text-astara-purple',
                            'data-[state=active]:bg-white! data-[state=active]:text-astara-purple',
                            'data-[state=active]:pt-3.5 data-[state=active]:shadow-[0_-4px_10px_rgba(0,0,0,0.03)]',
                            'after:hidden focus-visible:ring-0 focus-visible:outline-none',
                        )}
                    >
                        {tab.label}
                        {tab.count !== undefined && (
                            <span
                                className={cn(
                                    'pointer-events-none rounded-full px-1.5 py-0.5 text-[9px] leading-none',
                                    'bg-black/5 transition-colors',
                                    'group-data-[state=active]/tab:bg-astara-orange group-data-[state=active]/tab:text-white',
                                )}
                            >
                                {tab.count}
                            </span>
                        )}
                    </TabsTrigger>
                ))}
            </TabsList>
        </Tabs>
    );
}