import Image, { type StaticImageData } from "next/image";

import { Reveal } from "@/components/Reveal";

/**
 * Edge-to-edge 16:9 plate used to punctuate the editorial columns, matching
 * the reference layout's full-width imagery between text blocks.
 */
export function FullBleed({
  image,
  alt,
  priority = false,
}: {
  image: StaticImageData;
  alt: string;
  priority?: boolean;
}) {
  return (
    <Reveal>
      <div className="relative aspect-[4/3] w-full overflow-hidden bg-sand sm:aspect-[16/9]">
        <Image
          src={image}
          alt={alt}
          fill
          quality={82}
          sizes="100vw"
          placeholder="blur"
          priority={priority}
          className="object-cover"
        />
      </div>
    </Reveal>
  );
}
