"use client";
import type { VariantProps } from "@karma/cva";
import { cva, cx } from "@karma/cva";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import * as React from "react";

const avatarVariants = cva({
  base: "relative flex shrink-0 overflow-hidden rounded-full",

  variants: {
    size: {
      small: "h-8 w-8",
      medium: "h-10 w-10",
      large: "h-12 w-12",
    },
    variant: {
      accent: "bg-accent text-secondary",
      primary: "bg-background text-primary",
      outline: "border border-accent text-primary",
      muted: "bg-muted text-secondary",
    },
  },
  defaultVariants: {
    size: "medium",
    variant: "primary",
  },
});

export type AvatarProps = React.ComponentPropsWithoutRef<
  typeof AvatarPrimitive.Root
> &
  VariantProps<typeof avatarVariants>;

export const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  AvatarProps
>(({ className, size, variant, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cx(avatarVariants({ size, variant }), className)}
    {...props}
  />
));

Avatar.displayName = AvatarPrimitive.Root.displayName;