'use client';

import { Image } from '@/ui/Image';
import { SidebarItem } from '@/ui/SidebarItem';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';
import React from 'react';

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

export function FriendItem({ name, avatarUrl, country }: FriendItemProps) {
  return (
    <SidebarItem
      icon={
        <Surface width="100%" height="100%" rounded="full" overflow="hidden">
          <Image
            src={avatarUrl}
            alt={name}
            width={36}
            height={36}
            objectFit="cover"
          />
        </Surface>
      }
    >
      <Text size="sm" variant="high" weight="medium" truncate block>
        {name}
      </Text>
      <Text size="xs" variant="low" block>
        {country}
      </Text>
    </SidebarItem>
  );
}