import Image from "next/image";
import { OfferVideo } from "./OfferVideo";

/**
 * Peça de blocos na coluna da direita do topo de uma página interna (a grade é `heroWithMediaGrid`), só de 1024 px em
 * diante. Decorativa: fora da leitura. A peça não mede nada: ocupa a altura que o texto ao lado já deu à linha (e um
 * pouco da folga de cima e de baixo), então não empurra o texto nem aumenta o topo.
 * `image`: imagem de fundo transparente (`/3d/estado-*.webp`, 1200x900). `loop`: o loop `public/3d/peca-<nome>`
 * (640x400, fundo #0a0a0a, que some no topo escuro), pelo OfferVideo.
 */
export function PagePiece(
  props: Readonly<{ image: string } | { loop: string }>,
) {
  return (
    <div aria-hidden="true" className="relative hidden self-stretch lg:block">
      {/* object-contain: a peça inteira à vista; o loop chega com object-cover do OfferVideo e não pode perder as bordas */}
      <div className="absolute inset-x-0 -top-sp-8 -bottom-sp-6 [&_video]:object-contain">
        {"image" in props ? (
          <Image
            src={props.image}
            alt=""
            fill
            sizes="(min-width: 1024px) 40vw, 1px"
            className="object-contain"
          />
        ) : (
          <OfferVideo name={props.loop} />
        )}
      </div>
    </div>
  );
}