Image Generation

"use client";

import { useState } from "react";
import DitherGrid from "./DitherGrid";
import GeneratingStatus from "./GeneratingStatus";
import { cn } from "@/lib/utils";

export type ImageGenerationProps = {
  /** The generated picture. */
  src: string;
  /** The request shown as a chat bubble above the card. Empty hides it. */
  prompt?: string;
  /** Square size of the dither field in px. */
  cell?: number;
  /** Seconds of pure dither before the picture starts to appear. */
  delay?: number;
  /** Seconds for the reveal band to travel top to bottom. */
  sweep?: number;
  /** Band height as a share of the card. */
  band?: number;
  /** Card width in px; the picture is 2:3. */
  width?: number;
  /** Called once the picture is fully revealed. */
  onDone?: () => void;
  className?: string;
};

/** A chat-style image request whose placeholder dithers into the finished picture. */
export function ImageGeneration({
  src,
  prompt = "Generate an image of beautiful mountains",
  cell = 6,
  delay = 1.5,
  sweep = 3.2,
  band = 0.22,
  width = 320,
  onDone,
  className,
}: ImageGenerationProps) {
  const [done, setDone] = useState(false);

  return (
    <div className={cn("flex w-140 max-w-full flex-col gap-4", className)}>
      {prompt && (
        <p className="ml-auto squircle-mask squircle-2xl bg-neutral-100 px-3 py-2 text-xl font-medium tracking-tight text-zinc-600 dark:bg-neutral-900 dark:text-zinc-300">
          {prompt}
        </p>
      )}
      <div className="flex flex-col gap-1.5">
        <div className="w-fit squircle-mask squircle-4xl bg-neutral-100 p-3 dark:bg-neutral-900">
          {/* drop-shadow, not shadow-md: the squircle mask would clip a box-shadow */}
          <div className="drop-shadow-md">
            <div
              className="relative aspect-2/3 overflow-hidden squircle-mask squircle-3xl"
              style={{ width }}
            >
              <DitherGrid
                src={src}
                cell={cell}
                delay={delay}
                sweep={sweep}
                band={band}
                className="size-full"
                onDone={() => {
                  setDone(true);
                  onDone?.();
                }}
              />
            </div>
          </div>
        </div>
        <GeneratingStatus done={done} />
      </div>
    </div>
  );
}