import Image from "next/image";
import {
  BrowserFrame,
  displayUrl,
} from "@/app/components/showcase/BrowserFrame";
import { getCaseMedia } from "./case-media";

/** Capa do case: o pôster do site dentro de uma moldura de navegador. Sem captura gravada, não mostra nada. */
export function CaseCover({
  id,
  title,
  demoUrl,
  sizes = "(min-width: 1024px) 560px, 100vw",
  priority = false,
}: {
  id: string;
  title: string;
  demoUrl?: string | null;
  sizes?: string;
  priority?: boolean;
}) {
  const media = getCaseMedia(id, "desktop");
  if (!media) return null;

  return (
    <BrowserFrame url={displayUrl({ demoUrl, title })}>
      <div className="relative aspect-[16/10] bg-[#0a0a0a]">
        <Image
          src={media.poster}
          alt={`Captura de tela do site ${title}`}
          fill
          sizes={sizes}
          priority={priority}
          className="object-cover object-top"
        />
      </div>
    </BrowserFrame>
  );
}