import type { LucideIcon } from 'lucide-react';
import { BarChart3, History, Plus } from 'lucide-react';

import type {
  WalkthroughCheckInTab,
  WalkthroughCheckInTabId,
} from '@/business/walkthrough/types';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

const tabIcons: Record<WalkthroughCheckInTabId, LucideIcon> = {
  new: Plus,
  summary: BarChart3,
  history: History,
};

interface WalkthroughCheckInTabsProps {
  readonly tabs: readonly WalkthroughCheckInTab[];
  readonly activeTab: WalkthroughCheckInTabId;
  readonly onSelectTab: (tab: WalkthroughCheckInTabId) => void;
}

export function WalkthroughCheckInTabs({
  tabs,
  activeTab,
  onSelectTab,
}: WalkthroughCheckInTabsProps) {
  return (
    <div className="flex gap-1 bg-slate-800/40 rounded-xl border border-slate-700/40 p-1">
      {tabs.map((tab) => {
        const isActive = activeTab === tab.id;
        const Icon = tabIcons[tab.id];

        return (
          <Button
            key={tab.id}
            type="button"
            variant="ghost"
            onClick={() => onSelectTab(tab.id)}
            className={cn(
              'flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-all flex-1 justify-center',
              isActive
                ? 'bg-gradient-to-r from-indigo-500/20 to-violet-500/20 text-white border border-indigo-500/30'
                : 'text-slate-400 hover:text-slate-200 hover:bg-slate-700/30',
            )}
          >
            <Icon size={16} className={isActive ? 'text-indigo-400' : 'text-slate-500'} />
            {tab.label}
          </Button>
        );
      })}
    </div>
  );
}
