"use client";

import * as React from "react";
import { avatarParts, motifPaths } from "@/lib/avatars";

/**
 * One of the 100 guest avatars, drawn inline. The gradient needs an id that is
 * unique per instance, otherwise two avatars on the same screen share the
 * first one's colours.
 */
export function AvatarArt({ index, className, title }: { index: number; className?: string; title?: string }) {
  const uid = React.useId().replace(/:/g, "");
  const { palette, motif } = avatarParts(index);
  const [from, to] = palette;
  return (
    <svg viewBox="0 0 100 100" className={className} role={title ? "img" : "presentation"} aria-label={title} aria-hidden={title ? undefined : true}>
      <defs>
        <linearGradient id={`g${uid}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={from} />
          <stop offset="1" stopColor={to} />
        </linearGradient>
        <clipPath id={`c${uid}`}>
          <rect width="100" height="100" rx="50" />
        </clipPath>
      </defs>
      <g clipPath={`url(#c${uid})`}>
        <rect width="100" height="100" fill={`url(#g${uid})`} />
        {motifPaths(motif).map((p, i) => (
          <path key={i} d={p.d} fill="#fff" fillOpacity={p.o} />
        ))}
      </g>
    </svg>
  );
}