'use client';

import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { routes } from '@/lib/routing/RouteConfig';
import { Card, Card as Surface } 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 { 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>
      <Stack 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>
      </Stack>
      <Stack direction="row" gap={3} wrap>
        {friends.slice(0, 8).map((friend) => (
          <Stack key={friend.id}>
            <Link
              href={routes.driver.detail(friend.id)}
              variant="ghost"
            >
              <Surface 
                variant="muted" 
                rounded="xl" 
                border 
                p={2} 
                display="flex" 
                alignItems="center" 
                gap={2} 
                bg="bg-neutral-800/50" 
                borderColor="border-neutral-800"
              >
                <Stack 
                  w="8" 
                  h="8" 
                  rounded="full" 
                  overflow="hidden" 
                  bg="bg-gradient-to-br from-blue-500 to-purple-600"
                >
                 <Image
                   src={friend.avatarUrl || mediaConfig.avatars.defaultFallback}
                   alt={friend.name}
                   width={32}
                   height={32}
                   objectFit="cover"
                 />
                </Stack>
                <Text size="sm" color="text-white">{friend.name}</Text>
                <Text size="lg">{CountryFlagFormatter.fromCountryCode(friend.country).toString()}</Text>
              </Surface>
            </Link>
          </Stack>
        ))}
        {friends.length > 8 && (
          <Stack p={2}>
            <Text size="sm" color="text-gray-500">+{friends.length - 8} more</Text>
          </Stack>
        )}
      </Stack>
    </Card>
  );
}