// components/ui/avatar.tsx
"use client";

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

const avatarVariants = cva(
  "relative inline-flex items-center justify-center flex-shrink-0 rounded-full font-medium",
  {
    variants: {
      size: {
        xs: "h-8 w-8 text-xs",
        sm: "h-10 w-10 text-sm",
        md: "h-12 w-12 text-base",
        lg: "h-16 w-16 text-lg",
        xl: "h-20 w-20 text-xl",
      },
      variant: {
        default: "bg-gray-100 text-gray-600",
        primary: "bg-gradient-to-br from-sky-100 to-blue-100 text-sky-700",
        secondary: "bg-gradient-to-br from-emerald-100 to-teal-100 text-emerald-700",
        purple: "bg-gradient-to-br from-purple-100 to-pink-100 text-purple-700",
      },
      ring: {
        true: "ring-2 ring-white ring-offset-2",
      },
    },
    defaultVariants: {
      size: "md",
      variant: "default",
    },
  }
);

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

const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
  ({ className, size, variant, ring, src, alt, initials, children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={avatarVariants({ size, variant, ring, className })}
        {...props}
      >
        {src ? (
          <img src={src} alt={alt} className="h-full w-full object-cover rounded-full" />
        ) : initials ? (
          <span className="font-medium">{initials}</span>
        ) : (
          children
        )}
      </div>
    );
  }
);

Avatar.displayName = "Avatar";

export { Avatar, avatarVariants };