'use client';

import React from 'react';
import { Box } from '@/ui/Box';
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 (
    <nav aria-label="Profile navigation">
      <Box borderBottom borderColor="#23272B">
        <Stack direction="row" gap={8}>
          {tabs.map((tab) => (
            <Box
              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 ? '600' : '400'}
              mb="-1px"
              position="relative"
              className="group"
            >
              <Text capitalize>{tab.label}</Text>
              {activeTab === tab.id && (
                <Box
                  position="absolute"
                  bottom={0}
                  left={0}
                  right={0}
                  height="2px"
                  backgroundColor="#198CFF"
                  boxShadow="0 0 8px rgba(25, 140, 255, 0.5)"
                />
              )}
            </Box>
          ))}
        </Stack>
      </Box>
    </nav>
  );
}