import { cn } from '@lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '@ui/avatar';
import RoleRing from './role-ring';

export type AvatarUserType = {
  name: string;
  image?: string;
  role: string;
};

interface AvatarUserProps {
  user: AvatarUserType;
  className?: string;
  textSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
}

const AvatarUser = ({ user, className, textSize = 'md' }: AvatarUserProps) => {
  const { image, name, role } = user;
  const imagePath = image
    ? new URL(`../../../data/avatar/${image}`, import.meta.url).href
    : undefined;

  const shortName = name
    ?.split(' ')
    .slice(0, 2)
    .map((name) => name[0])
    .join('');

  return (
    <RoleRing type={role}>
      <Avatar className={className}>
        <AvatarImage src={imagePath} title={shortName} />
        <AvatarFallback
          className={cn(
            'bg-orange-400 text-white',
            textSize === 'sm' && 'text-xs',
            textSize === 'md' && 'text-sm',
            textSize === 'lg' && 'text-xl',
            textSize === 'xl' && 'text-2xl',
            textSize === '2xl' && 'text-3xl',
            textSize === '3xl' && 'text-4xl',
          )}
        >
          {shortName}
        </AvatarFallback>
      </Avatar>
    </RoleRing>
  );
};

export default AvatarUser;
