

import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Users } from 'lucide-react';

interface Friend {
  id: string;
  name: string;
  avatarUrl?: string;
  country: string;
}

interface FriendsPreviewProps {
  friends: Friend[];
}

export function FriendsPreview({ friends }: FriendsPreviewProps) {
  return (
    <Card>
      <Box mb={4}>
        <Stack direction="row" align="center" justify="between">
          <Heading level={2} icon={<Icon icon={Users} size={5} color="#a855f7" />}>
            Friends
          </Heading>
          <Text size="sm" color="text-gray-500" weight="normal">({friends.length})</Text>
        </Stack>
      </Box>
      <Stack direction="row" gap={3} wrap>
        {friends.slice(0, 8).map((friend) => (
          <Box key={friend.id}>
            <Link
              href={`/drivers/${friend.id}`}
              variant="ghost"
            >
              <Surface variant="muted" rounded="xl" border padding={2} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', backgroundColor: 'rgba(38, 38, 38, 0.5)', borderColor: '#262626' }}>
                <Box style={{ width: '2rem', height: '2rem', borderRadius: '9999px', overflow: 'hidden', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)' }}>
                 <Image
                   src={friend.avatarUrl || mediaConfig.avatars.defaultFallback}
                   alt={friend.name}
                   width={32}
                   height={32}
                   style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                 />
                </Box>
                <Text size="sm" color="text-white">{friend.name}</Text>
                <Text size="lg">{CountryFlagDisplay.fromCountryCode(friend.country).toString()}</Text>
              </Surface>
            </Link>
          </Box>
        ))}
        {friends.length > 8 && (
          <Box p={2}>
            <Text size="sm" color="text-gray-500">+{friends.length - 8} more</Text>
          </Box>
        )}
      </Stack>
    </Card>
  );
}
