import { cn } from "~/utils/cn";

const DOTS = ["bg-kumo-interact", "bg-kumo-interact", "bg-kumo-interact"] as const;

/** Browser-ish chrome around an animated product demo. Decorative: the demo is described by `label`. */
export function DemoWindow({
  title,
  label,
  className,
  children,
}: {
  title: string;
  label: string;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <figure className={cn("overflow-hidden rounded-lg border border-kumo-hairline bg-kumo-canvas", className)}>
      <figcaption className="sr-only">{label}</figcaption>
      <div aria-hidden className="flex items-center gap-3 border-b border-kumo-hairline bg-kumo-base/70 px-4 py-2.5">
        <div aria-hidden className="flex gap-1.5">
          {DOTS.map((dot, index) => (
            // oxlint-disable-next-line react/no-array-index-key -- fixed decorative dots
            <span key={index} className={cn("size-2.5 rounded-full", dot)} />
          ))}
        </div>
        <span className="truncate font-mono text-xs text-kumo-subtle">{title}</span>
      </div>
      <div aria-hidden className="text-sm">
        {children}
      </div>
    </figure>
  );
}