import { MediaImage } from '#web-runtime/components/media-image';
import type { MediaBlock as MediaBlockData } from '#web-runtime/types';

export default function MediaBlock({ block }: { block: MediaBlockData }) {
  if (!block.media?.url) {
    return null;
  }

  return (
    <section
      className="border-b border-[#d6d7cf] py-[clamp(4.5rem,9vw,8rem)] nth-of-type-[even]:bg-[#fffdf8]"
      data-page-block={block.type}
    >
      <div className="mx-auto w-[min(calc(100%-2rem),76rem)] max-[45rem]:w-[min(calc(100%-1.25rem),76rem)]">
        <figure className="m-0">
          <MediaImage
            media={block.media}
            className="rounded-4xl shadow-[0_1.5rem_4rem_rgb(23_32_25/12%)]"
          />
        </figure>
      </div>
    </section>
  );
}