Avatar profile photo

'use client';

import { AvatarProfilePhoto } from './avatar-profile-photo';

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

export default function AvatarProfilePhotoDemo({ replay = 0 }: { replay?: number }) {
  return (
    // The key remounts the photos on Replay, so they load and fade in again.
    <div key={replay} className="flex w-full max-w-xl flex-col items-center gap-10">
      <div className="flex flex-wrap items-end justify-center gap-6">
        <AvatarProfilePhoto size="sm" src={PHOTO} name="Olivia Rhye" verified />
        <AvatarProfilePhoto size="md" src={PHOTO} name="Olivia Rhye" verified />
        <AvatarProfilePhoto size="lg" src={PHOTO} name="Olivia Rhye" verified />
      </div>
      <div className="flex items-center justify-center gap-6">
        <AvatarProfilePhoto name="Olivia Rhye" />
        <AvatarProfilePhoto name="Olivia Rhye" placeholder="icon" />
      </div>
      <div className="w-full overflow-hidden rounded-xl border border-secondary bg-primary">
        <div className="h-24 bg-linear-to-r from-utility-brand-200 to-utility-pink-200" />
        <div className="flex items-end gap-4 px-6 pb-6">
          <AvatarProfilePhoto size="lg" src={PHOTO} name="Olivia Rhye" verified className="-mt-20 shrink-0" />
          <div className="flex flex-col">
            <span className="text-lg font-semibold text-primary">Olivia Rhye</span>
            <span className="text-sm text-tertiary">Product designer</span>
          </div>
        </div>
      </div>
    </div>
  );
}