Avatar

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

const SIZES = ["sm", "default", "lg"] as const;

/**
 * A small inline SVG data URI so the "Image" row has a real, offline-safe
 * source. In product code this is a photo URL; the fallback below covers the
 * image being missing, still loading, or failing to load — all resolve to the
 * same initials.
 */
const SAMPLE_IMAGE =
  "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%3E%3Crect%20width='80'%20height='80'%20fill='%23d4d4d4'/%3E%3Ccircle%20cx='40'%20cy='32'%20r='14'%20fill='%23525252'/%3E%3Cpath%20d='M16%2076c0-13%2011-22%2024-22s24%209%2024%2022'%20fill='%23525252'/%3E%3C/svg%3E";

/**
 * Live Avatar example — the three sizes, shown with a loaded image and with the
 * initials fallback. Avatar is static: nothing here is clickable or focusable.
 */
export function AvatarShowcase() {
  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Image
        </h3>
        <div className="flex flex-wrap items-center gap-3">
          {SIZES.map((size) => (
            <Avatar key={size} size={size}>
              <AvatarImage src={SAMPLE_IMAGE} alt="Ada Lovelace" />
              <AvatarFallback>AL</AvatarFallback>
            </Avatar>
          ))}
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Fallback (initials)
        </h3>
        <div className="flex flex-wrap items-center gap-3">
          {SIZES.map((size) => (
            <Avatar key={size} size={size}>
              <AvatarFallback>AL</AvatarFallback>
            </Avatar>
          ))}
        </div>
      </section>
    </div>
  );
}