import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { BarChart3, TrendingUp, User } from 'lucide-react';

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

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

export function ProfileTabs({ activeTab, onTabChange }: ProfileTabsProps) {
  return (
    <Surface variant="muted" rounded="xl" padding={1} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', border: '1px solid #262626', width: 'fit-content' }}>
      <Box style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
        <Button
          variant={activeTab === 'overview' ? 'primary' : 'ghost'}
          onClick={() => onTabChange('overview')}
          size="sm"
          icon={<Icon icon={User} size={4} />}
        >
          Overview
        </Button>
        <Button
          variant={activeTab === 'stats' ? 'primary' : 'ghost'}
          onClick={() => onTabChange('stats')}
          size="sm"
          icon={<Icon icon={BarChart3} size={4} />}
        >
          Detailed Stats
        </Button>
        <Button
          variant={activeTab === 'ratings' ? 'primary' : 'ghost'}
          onClick={() => onTabChange('ratings')}
          size="sm"
          icon={<Icon icon={TrendingUp} size={4} />}
        >
          Ratings
        </Button>
      </Box>
    </Surface>
  );
}