Avatar

'use client';

import * as React from 'react';
import { Avatar, AvatarGroup, AvatarLabelGroup } from './avatar';

// Self-drawn placeholder portraits (a soft head and shoulders on a tinted card), so the demo needs no photos.
const portrait = (bg: string, fg: string) =>
  `data:image/svg+xml,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="${bg}"/><circle cx="32" cy="26" r="11" fill="${fg}"/><path d="M10 64c2-13 11-21 22-21s20 8 22 21z" fill="${fg}"/></svg>`,
  )}`;

const PHOTOS = [
  portrait('#d9ccf5', '#8b6fd6'),
  portrait('#f7d9c4', '#d08a5c'),
  portrait('#c9e4dc', '#5f9e8a'),
  portrait('#f3d0d8', '#c4677f'),
  portrait('#cfdcf2', '#5d82c4'),
  portrait('#efe3c2', '#b4974a'),
];

const PEOPLE = [
  'Olivia Rhye',
  'Phoenix Baker',
  'Lana Steiner',
  'Demi Wilkinson',
  'Candice Wu',
  'Natali Craig',
  'Drew Cano',
  'Orlando Diggs',
];
const NEW_PEOPLE = ['Andi Lane', 'Kate Morrison', 'Koray Okumus'];
const photoOf = (person: string) => PHOTOS[[...PEOPLE, ...NEW_PEOPLE].indexOf(person) % PHOTOS.length];

export default function AvatarDemo({ replay = 0 }: { replay?: number }) {
  const [group, setGroup] = React.useState(PEOPLE);

  const add = React.useCallback(() => {
    setGroup((list) => {
      const next = NEW_PEOPLE.find((n) => !list.includes(n));
      return next ? [next, ...list] : list.slice(1);
    });
  }, []);

  React.useEffect(() => {
    if (replay === 0) return;
    setGroup(PEOPLE);
    const timer = window.setTimeout(add, 500);
    return () => window.clearTimeout(timer);
  }, [replay, add]);

  return (
    // The key remounts the avatars on Replay, so the photos load and fade in again.
    <div key={replay} className="flex flex-col items-center gap-10">
      <div className="flex flex-wrap items-end justify-center gap-4">
        <Avatar size="xs" src={PHOTOS[0]} name="Olivia Rhye" />
        <Avatar size="sm" src={PHOTOS[1]} name="Phoenix Baker" status="online" />
        <Avatar size="md" src={PHOTOS[2]} name="Lana Steiner" status="verified" />
        <Avatar size="lg" name="Demi Wilkinson" status="offline" />
        <Avatar size="xl" placeholder="icon" name="Candice Wu" border />
        <Avatar size="2xl" src={PHOTOS[3]} name="Natali Craig" count={3} />
      </div>
      <div className="flex flex-wrap items-center justify-center gap-4">
        <Avatar shape="square" size="lg" src={PHOTOS[4]} name="Studio Lumen" />
        <Avatar shape="square" size="lg" name="Studio Lumen" border />
        <Avatar shape="square" size="lg" placeholder="icon" border />
      </div>
      <AvatarGroup size="md" max={5} onAdd={add}>
        {group.map((person) => (
          <Avatar key={person} name={person} src={photoOf(person)} />
        ))}
      </AvatarGroup>
      <div className="flex flex-wrap items-center justify-center gap-8">
        <AvatarLabelGroup
          size="md"
          src={PHOTOS[0]}
          name="Olivia Rhye"
          supportingText="olivia@ganisigit.com"
        />
        <AvatarLabelGroup
          size="lg"
          name="Phoenix Baker"
          status="online"
          supportingText="phoenix@ganisigit.com"
        />
      </div>
    </div>
  );
}