import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Flag, UserPlus, Users } from 'lucide-react';

interface RacingProfileProps {
  racingStyle: string;
  favoriteTrack: string;
  favoriteCar: string;
  availableHours: string;
  lookingForTeam: boolean;
  openToRequests: boolean;
}

export function RacingProfile({
  racingStyle,
  favoriteTrack,
  favoriteCar,
  availableHours,
  lookingForTeam,
  openToRequests,
}: RacingProfileProps) {
  return (
    <Card>
      <Box mb={4}>
        <Heading level={2} icon={<Icon icon={Flag} size={5} color="#00f2ff" />}>
          Racing Profile
        </Heading>
      </Box>
      <Stack gap={4}>
        <Box>
          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Racing Style</Text>
          <Text color="text-white" weight="medium">{racingStyle}</Text>
        </Box>
        <Box>
          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Favorite Track</Text>
          <Text color="text-white" weight="medium">{favoriteTrack}</Text>
        </Box>
        <Box>
          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Favorite Car</Text>
          <Text color="text-white" weight="medium">{favoriteCar}</Text>
        </Box>
        <Box>
          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Available</Text>
          <Text color="text-white" weight="medium">{availableHours}</Text>
        </Box>

        {/* Status badges */}
        <Box mt={4} pt={4} style={{ borderTop: '1px solid rgba(38, 38, 38, 0.5)' }}>
          <Stack gap={2}>
            {lookingForTeam && (
              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)', border: '1px solid rgba(16, 185, 129, 0.3)' }}>
                <Stack direction="row" align="center" gap={2}>
                  <Icon icon={Users} size={4} color="#10b981" />
                  <Text size="sm" color="text-performance-green" weight="medium">Looking for Team</Text>
                </Stack>
              </Surface>
            )}
            {openToRequests && (
              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', border: '1px solid rgba(59, 130, 246, 0.3)' }}>
                <Stack direction="row" align="center" gap={2}>
                  <Icon icon={UserPlus} size={4} color="#3b82f6" />
                  <Text size="sm" color="text-primary-blue" weight="medium">Open to Friend Requests</Text>
                </Stack>
              </Surface>
            )}
          </Stack>
        </Box>
      </Stack>
    </Card>
  );
}