'use client';

import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

export type ProfileTab = 'overview' | 'history' | 'stats' | 'leagues' | 'liveries' | 'settings';

interface ProfileNavTabsProps {
  activeTab: ProfileTab;
  onTabChange: (tab: ProfileTab) => void;
  tabs?: { id: ProfileTab; label: string }[];
}

const DEFAULT_TABS: { id: ProfileTab; label: string }[] = [
  { id: 'overview', label: 'Overview' },
  { id: 'history', label: 'History' },
  { id: 'stats', label: 'Stats' },
  { id: 'leagues', label: 'Leagues' },
  { id: 'liveries', label: 'Liveries' },
  { id: 'settings', label: 'Settings' },
];

export function ProfileNavTabs({ activeTab, onTabChange, tabs = DEFAULT_TABS }: ProfileNavTabsProps) {
  return (
    <Stack as="nav" {...({ 'aria-label': 'Profile navigation' } as any)}>
      <Stack borderBottom borderColor="#23272B">
        <Stack direction="row" gap={8}>
          {tabs.map((tab) => (
            <Stack
              key={tab.id}
              onClick={() => onTabChange(tab.id)}
              pb={4}
              cursor="pointer"
              borderBottom
              borderColor={activeTab === tab.id ? '#198CFF' : 'transparent'}
              color={activeTab === tab.id ? '#198CFF' : '#9ca3af'}
              transition
              fontSize="0.875rem"
              fontWeight={activeTab === tab.id ? 'semibold' : 'normal'}
              position="relative"
              className="group mb-[-1px]"
            >
              <Text capitalize>{tab.label}</Text>
              {activeTab === tab.id && (
                <Stack
                  position="absolute"
                  bottom={0}
                  left={0}
                  right={0}
                  height="2px"
                  backgroundColor="#198CFF"
                  {...({ boxShadow: "0 0 8px rgba(25, 140, 255, 0.5)" } as any)}
                >{null}</Stack>
              )}
            </Stack>
          ))}
        </Stack>
      </Stack>
    </Stack>
  );
}