import * as React from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";

import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "../../lib/utils"

const avatarVariants = cva(
  "",
    {
    variants:{
      variant:{
        rounded:"flex h-full w-full items-center justify-center rounded-full bg-muted",
        default:'h-full w-full flex items-center justify-center bg-primary/20'
      },
    }
  }
)

interface AvatarProps extends React.ComponentProps<typeof AvatarPrimitive.Root> , VariantProps<typeof avatarVariants> {
  src?: string;
  fallbackText: string;
}

const Avatar: React.FC<AvatarProps> = ({ src, variant , fallbackText, className, ...props }) => {
  if (fallbackText.length > 2) {
    throw new Error("Fallback text must be 1 or 2 letters long.");
  }

  return (
    <AvatarPrimitive.Root
      className={cn(
        "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
        className
      )}
      {...props}
    >
      <AvatarPrimitive.Image src={src} className="aspect-square h-full w-full" />
      <AvatarPrimitive.Fallback className={cn(avatarVariants({variant}))}>
        {fallbackText}
      </AvatarPrimitive.Fallback>
    </AvatarPrimitive.Root>
  );
};

Avatar.displayName = AvatarPrimitive.Root.displayName;

export { Avatar };
