'use client';

import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Car, Clock, MailCheck, MapPin, Users2 } from 'lucide-react';

interface DriverRacingProfileProps {
  racingStyle?: string | null;
  favoriteTrack?: string | null;
  favoriteCar?: string | null;
  availableHours?: string | null;
  lookingForTeam?: boolean;
  openToRequests?: boolean;
}

export function DriverRacingProfile({
  racingStyle,
  favoriteTrack,
  favoriteCar,
  availableHours,
  lookingForTeam,
  openToRequests,
}: DriverRacingProfileProps) {
  const details = [
    { label: 'Racing Style', value: racingStyle || 'Not specified', icon: Users2 },
    { label: 'Favorite Track', value: favoriteTrack || 'Not specified', icon: MapPin },
    { label: 'Favorite Car', value: favoriteCar || 'Not specified', icon: Car },
    { label: 'Availability', value: availableHours || 'Not specified', icon: Clock },
  ];

  return (
    <Stack display="flex" flexDirection="col" gap={6} rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50" p={6}>
      <Stack display="flex" alignItems="center" justifyContent="between">
        <Heading level={3}>Racing Profile</Heading>
        <Stack direction="row" gap={2}>
          {lookingForTeam && (
            <Stack display="flex" alignItems="center" gap={1.5} rounded="full" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20" px={3} py={1}>
              <Users2 size={12} color="#198CFF" />
              <Text size="xs" weight="bold" color="text-primary-blue" uppercase letterSpacing="tight">Looking for Team</Text>
            </Stack>
          )}
          {openToRequests && (
            <Stack display="flex" alignItems="center" gap={1.5} rounded="full" bg="bg-performance-green/10" border borderColor="border-performance-green/20" px={3} py={1}>
              <MailCheck size={12} color="#22C55E" />
              <Text size="xs" weight="bold" color="text-performance-green" uppercase letterSpacing="tight">Open to Requests</Text>
            </Stack>
          )}
        </Stack>
      </Stack>

      <Stack display="grid" gridCols={{ base: 1, sm: 2 }} gap={4}>
        {details.map((detail, index) => {
          const Icon = detail.icon;
          return (
            <Stack key={index} display="flex" alignItems="center" gap={4} rounded="xl" border borderColor="border-charcoal-outline/50" bg="bg-deep-graphite/50" p={4}>
              <Stack display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="lg" bg="bg-charcoal-outline/50" color="text-gray-400">
                <Icon size={20} />
              </Stack>
              <Stack display="flex" flexDirection="col">
                <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
                  {detail.label}
                </Text>
                <Text size="sm" weight="semibold" color="text-white">
                  {detail.value}
                </Text>
              </Stack>
            </Stack>
          );
        })}
      </Stack>
    </Stack>
  );
}