import { ImageIcon } from "lucide-react";

interface ScreenshotPlaceholderProps {
  alt: string;
  caption?: string;
  aspectRatio?: "video" | "square" | "wide" | "tall";
}

const aspectClasses = {
  video: "aspect-video",
  square: "aspect-square",
  wide: "aspect-[21/9]",
  tall: "aspect-[9/16]",
};

export function ScreenshotPlaceholder({
  alt,
  caption,
  aspectRatio = "video",
}: ScreenshotPlaceholderProps) {
  return (
    <figure className="my-6">
      <div
        className={`${aspectClasses[aspectRatio]} w-full rounded-xl border-2 border-dashed border-[#E8E3DC] bg-[#FAFAF7] flex flex-col items-center justify-center gap-3`}
      >
        <ImageIcon className="size-8 text-[#8A8F87]/50" />
        <span className="text-sm text-[#8A8F87]/70 text-center px-4">
          {alt}
        </span>
      </div>
      {caption && (
        <figcaption className="mt-2 text-center text-sm text-[#8A8F87]">
          {caption}
        </figcaption>
      )}
    </figure>
  );
}
