import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../../../@/lib/utils";

const avatarVariants = cva(
  "relative flex justify-center items-center rounded-full bg-gray-500 text-xl text-white",
  {
    variants: {
      size: {
        default: "text-md w-9 h-9",
        sm: "text-sm w-6 h-6",
        md: "text-md h-10 w-10",
        lg: "text-xl w-12 h-12",
        xl: "w-[160px] h-[160px]",
        xm: "text-xs w-4 h-4",
      },
    },
    defaultVariants: {
      size: "default",
    },
  }
);

type AvatarType = {
  image?: string;
  name?: string;
  imageAlt?: string;
};

export interface AvatarProps
  extends VariantProps<typeof avatarVariants>,
    React.HTMLAttributes<HTMLDivElement>,
    AvatarType {
  imageAvatarClassName?: string;
}

const Avatar = ({
  size,
  image,
  name,
  imageAlt,
  className,
  imageAvatarClassName,
  ...props
}: AvatarProps) => {
  return (
    <div className={cn(avatarVariants({ className, size }))} {...props}>
      {image ? (
        <img
          src={image}
          className={cn("h-full w-full rounded-full", imageAvatarClassName)}
          alt={imageAlt}
        />
      ) : (
        (name || "")
          .split(" ")
          .slice(0, 2)
          .map((x) => x.charAt(0).toUpperCase())
      )}
    </div>
  );
};

Avatar.displayName = "Avatar";

export { Avatar, AvatarType };
