Avatar group

"use client";

import * as React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface Person {
  name: string;
  src?: string;
  /** Hue (0–360) for the initials background when there's no image. */
  hue?: number;
}

export interface AvatarProps extends Person {
  size?: number;
  className?: string;
}

export function Avatar({ name, src, hue, size = 32, className }: AvatarProps) {
  const initials = name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
  const h = hue ?? [...name].reduce((n, c) => n + c.charCodeAt(0), 0) % 360;
  return (
    <span
      className={cn("relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full font-semibold text-white ring-2 ring-background", className)}
      style={{ width: size, height: size, fontSize: size * 0.36, background: `oklch(0.62 0.13 ${h})` }}
      title={name}
    >
      {src ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={src} alt={name} className="size-full object-cover" />
      ) : (
        <span aria-hidden>{initials}</span>
      )}
      {!src && <span className="sr-only">{name}</span>}
    </span>
  );
}

export interface AvatarGroupProps {
  people: Person[];
  max?: number;
  size?: number;
  className?: string;
}

/** Overlapping avatars that spread apart on hover. */
export function AvatarGroup({ people, max = 4, size = 32, className }: AvatarGroupProps) {
  const [hover, setHover] = React.useState(false);
  const shown = people.slice(0, max);
  const extra = people.length - shown.length;
  const overlap = size * 0.32;

  return (
    <div
      className={cn("flex items-center", className)}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
      aria-label={`${people.length} people`}
      role="group"
    >
      {shown.map((p, i) => (
        <motion.span
          key={p.name}
          animate={{ marginLeft: i === 0 ? 0 : hover ? 4 : -overlap }}
          transition={{ type: "spring", stiffness: 400, damping: 28 }}
          style={{ zIndex: shown.length - i }}
        >
          <Avatar {...p} size={size} />
        </motion.span>
      ))}
      {extra > 0 && (
        <motion.span
          animate={{ marginLeft: hover ? 4 : -overlap }}
          className="relative grid place-items-center rounded-full bg-muted font-medium text-muted-foreground ring-2 ring-background"
          style={{ width: size, height: size, fontSize: size * 0.34 }}
        >
          +{extra}
        </motion.span>
      )}
    </div>
  );
}