Avatar Stack

"use client";
import { cn } from "@/lib/utils";

type State = "few" | "many" | "empty";

const AVATARS = [
{ char: "E", color: "bg-lab-accent/30 text-lab-accent" },
{ char: "A", color: "bg-blue-500/30 text-blue-400" },
{ char: "B", color: "bg-emerald-500/30 text-emerald-400" },
{ char: "C", color: "bg-purple-500/30 text-purple-400" },
{ char: "D", color: "bg-pink-500/30 text-pink-400" },
{ char: "F", color: "bg-orange-500/30 text-orange-400" },
{ char: "G", color: "bg-yellow-500/30 text-yellow-400" },
{ char: "H", color: "bg-cyan-500/30 text-cyan-400" },
];

export function AvatarStack({ state = "few" }: { state?: State }) {
if (state === "empty") {
  return (
    <div className="grid w-full max-w-md place-items-center rounded-lg border border-dashed border-border/60 py-10">
      <p className="font-mono text-xs text-muted-foreground">尚無成員</p>
    </div>
  );
}

const list = state === "many" ? AVATARS : AVATARS.slice(0, 3);
const display = list.slice(0, 5);
const extra = list.length - display.length;

return (
  <div className="w-full max-w-md">
    <div className="flex -space-x-2">
      {display.map((a, i) => (
        <div
          key={i}
          className={cn(
            "grid h-9 w-9 place-items-center rounded-full ring-2 ring-background font-mono text-xs",
            a.color,
          )}
        >
          {a.char}
        </div>
      ))}
      {extra > 0 && (
        <div className="grid h-9 w-9 place-items-center rounded-full bg-muted text-muted-foreground ring-2 ring-background font-mono text-xs">
          +{extra}
        </div>
      )}
    </div>
    <p className="mt-2 font-mono text-[11px] text-muted-foreground">
      {list.length} 位成員
    </p>
  </div>
);
}