import Link from 'next/link';
import Image from 'next/image';
import { getCountryFlag } from '@/lib/utilities/country';

interface FriendItemProps {
  id: string;
  name: string;
  avatarUrl: string;
  country: string;
}

export function FriendItem({ id, name, avatarUrl, country }: FriendItemProps) {
  return (
    <Link
      href={`/drivers/${id}`}
      className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite transition-colors"
    >
      <div className="w-9 h-9 rounded-full overflow-hidden bg-gradient-to-br from-primary-blue to-purple-600">
        <Image
          src={avatarUrl}
          alt={name}
          width={36}
          height={36}
          className="w-full h-full object-cover"
        />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-white text-sm font-medium truncate">{name}</p>
        <p className="text-xs text-gray-500">{getCountryFlag(country)}</p>
      </div>
    </Link>
  );
}