import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { useServices } from '@/lib/services/ServiceProvider';

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

interface FriendPillProps {
  friend: Friend;
}

function getCountryFlag(countryCode: string): string {
  const code = countryCode.toUpperCase();
  if (code.length === 2) {
    const codePoints = [...code].map(char => 127397 + char.charCodeAt(0));
    return String.fromCodePoint(...codePoints);
  }
  return '🏁';
}

export default function FriendPill({ friend }: FriendPillProps) {
  const { mediaService } = useServices();

  return (
    <Link
      href={`/drivers/${friend.id}`}
      className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline hover:border-purple-400/30 hover:bg-iron-gray transition-all"
    >
      <div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-primary-blue to-purple-600">
        <Image
          src={mediaService.getDriverAvatar(friend.id)}
          alt={friend.name}
          width={32}
          height={32}
          className="w-full h-full object-cover"
        />
      </div>
      <span className="text-sm text-white">{friend.name}</span>
      <span className="text-lg">{getCountryFlag(friend.country)}</span>
    </Link>
  );
}