'use client';

import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { BarChart3, LayoutDashboard, ShieldCheck } from 'lucide-react';

export type ProfileTab = 'overview' | 'stats' | 'ratings';

interface DriverProfileTabsProps {
  activeTab: ProfileTab;
  onTabChange: (tab: ProfileTab) => void;
}

export function DriverProfileTabs({ activeTab, onTabChange }: DriverProfileTabsProps) {
  const tabs = [
    { id: 'overview', label: 'Overview', icon: LayoutDashboard },
    { id: 'stats', label: 'Career Stats', icon: BarChart3 },
    { id: 'ratings', label: 'Ratings', icon: ShieldCheck },
  ] as const;

  return (
    <Box display="flex" alignItems="center" gap={1} borderBottom borderColor="border-charcoal-outline">
      {tabs.map((tab) => {
        const isActive = activeTab === tab.id;
        const Icon = tab.icon;
        
        return (
          <Box
            as="button"
            data-testid={`profile-tab-${tab.id}`}
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            position="relative"
            display="flex"
            alignItems="center"
            gap={2}
            px={6}
            py={4}
            transition
            hoverBg="bg-white/5"
            color={isActive ? 'text-primary-blue' : 'text-gray-500'}
            hoverTextColor={isActive ? 'text-primary-blue' : 'text-gray-300'}
          >
            <Icon size={18} />
            <Text size="sm" weight={isActive ? 'bold' : 'medium'} color="inherit">
              {tab.label}
            </Text>
            
            {isActive && (
              <Box position="absolute" bottom="0" left="0" h="0.5" w="full" bg="bg-primary-blue" shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]" />
            )}
          </Box>
        );
      })}
    </Box>
  );
}