import { Eye, Lightbulb, Shield } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
  ZONES_OF_REGULATION_TABS,
  type ZonesOfRegulationTab,
} from '@/shared/constants/zonesOfRegulation';
import { cn } from '@/lib/utils';

const TAB_ICONS: Record<ZonesOfRegulationTab, LucideIcon> = {
  overview: Eye,
  student: Lightbulb,
  adult: Shield,
};

interface ZonesTabsProps {
  readonly activeTab: ZonesOfRegulationTab;
  readonly onTabChange: (tab: ZonesOfRegulationTab) => void;
}

export function ZonesTabs({ activeTab, onTabChange }: ZonesTabsProps) {
  return (
    <div className="flex gap-2 bg-white rounded-xl border border-violet-100 p-1.5 shadow-sm w-fit">
      {ZONES_OF_REGULATION_TABS.map((tab) => {
        const Icon = TAB_ICONS[tab.id];
        const selected = activeTab === tab.id;

        return (
          <Button
            key={tab.id}
            type="button"
            variant="ghost"
            onClick={() => onTabChange(tab.id)}
            className={cn(
              'flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-all h-auto',
              selected
                ? 'bg-gradient-to-r from-teal-500 to-emerald-500 text-white shadow-sm hover:from-teal-600 hover:to-emerald-600'
                : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50',
            )}
          >
            <Icon size={14} />
            {tab.label}
          </Button>
        );
      })}
    </div>
  );
}
