import React from 'react';
import { Image } from 'expo-image';

interface AvatarProps {
  size?: 16 | 20 | 24 | 32 | 40 | 56;
  shape?: 'pill';
  variant?: 'image';
  blurhash?: boolean;
  imgUrl: string;
}

const blurhashValue =
  '|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[';

const Avatar: React.FC<AvatarProps> = ({
  size = 40,
  shape = 'pill',
  variant = 'image',
  blurhash = false,
  imgUrl,
}) => {
  return (
    <Image
      source={{ uri: imgUrl }}
      style={{
        width: size,
        height: size,
        borderRadius: 999,
      }}
      placeholder={blurhash ? { blurhashValue } : undefined}
      contentFit="cover"
      transition={200}
    />
  );
};

export default Avatar;