import { Box } from './Box';
import { Image } from './Image';
import { Surface } from './Surface';
import { Text } from './Text';

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

export function FriendItem({ name, avatarUrl, country }: FriendItemProps) {
  return (
    <Surface
      variant="muted"
      padding={2}
      rounded="lg"
      style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}
    >
      <Box
        w="9"
        h="9"
        rounded="full"
        overflow="hidden"
        style={{
          background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)',
        }}
      >
        <Image
          src={avatarUrl}
          alt={name}
          width={36}
          height={36}
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
      </Box>
      <Box style={{ flex: 1, minWidth: 0 }}>
        <Text size="sm" color="text-white" weight="medium" truncate block>
          {name}
        </Text>
        <Text size="xs" color="text-gray-500" block>
          {country}
        </Text>
      </Box>
    </Surface>
  );
}