"use client";
import * as React from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import { motion } from "motion/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

type Color = "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "danger" | "info";
const container: Record<Color, string> = {
  primary: "bg-primary-container text-on-primary-container",
  secondary: "bg-secondary-container text-on-secondary-container",
  tertiary: "bg-tertiary-container text-on-tertiary-container",
  accent: "bg-accent-container text-on-accent-container",
  success: "bg-success-container text-on-success-container",
  warning: "bg-warning-container text-on-warning-container",
  danger: "bg-danger-container text-on-danger-container",
  info: "bg-info-container text-on-info-container",
};
const sizes = { sm: "size-8 text-xs", default: "size-11 text-sm", lg: "size-16 text-lg" } as const;

export function Avatar({
  className,
  size = "default",
  ...p
}: React.ComponentProps<typeof AvatarPrimitive.Root> & { size?: keyof typeof sizes }) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn(
        "relative flex shrink-0 overflow-hidden rounded-full bg-surface shadow-clay-sm",
        // inset highlight on top of images too
        "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:shadow-[inset_-3px_-4px_0_var(--clay-lo),inset_3px_3px_0_var(--clay-hi)]",
        sizes[size],
        className
      )}
      {...p}
    />
  );
}
export function AvatarImage({ className, ...p }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return <AvatarPrimitive.Image className={cn("aspect-square size-full object-cover", className)} {...p} />;
}
export function AvatarFallback({
  className,
  color = "primary",
  ...p
}: Omit<React.ComponentProps<typeof AvatarPrimitive.Fallback>, "color"> & { color?: Color }) {
  return (
    <AvatarPrimitive.Fallback
      className={cn("flex size-full items-center justify-center rounded-full font-extrabold tracking-tight", container[color], className)}
      {...p}
    />
  );
}

/** Stacked avatars that fan out on hover. */
export function AvatarGroup({ className, children, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  const [hover, setHover] = React.useState(false);
  const items = React.Children.toArray(children);
  return (
    <div
      className={cn("flex items-center", className)}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
      {...p}
    >
      {items.map((child, i) => (
        <motion.div
          key={i}
          className="rounded-full ring-4 ring-background"
          style={{ zIndex: items.length - i }}
          animate={{ marginLeft: i === 0 ? 0 : hover ? 4 : -10, y: hover ? (i % 2 ? -3 : 3) : 0, rotate: hover ? (i - (items.length - 1) / 2) * 4 : 0 }}
          transition={springs.squish}
        >
          {child}
        </motion.div>
      ))}
    </div>
  );
}
Installation
