import { LinkList } from '#web-runtime/components/links';
import { MediaImage } from '#web-runtime/components/media-image';
import { RichTextContent } from '#web-runtime/components/rich-text';
import type { MediaContentBlock as MediaContentBlockData } from '#web-runtime/types';

export default function MediaContentBlock({ block }: { block: MediaContentBlockData }) {
  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 grid w-[min(calc(100%-2rem),76rem)] grid-cols-[minmax(0,1fr)_minmax(0,0.9fr)] items-center gap-[clamp(2.5rem,7vw,6rem)] max-[45rem]:w-[min(calc(100%-1.25rem),76rem)] max-[45rem]:grid-cols-1">
        <figure
          className={`m-0 empty:hidden ${block.mediaPosition === 'right' ? 'order-2 max-[45rem]:order-0' : ''}`}
        >
          <MediaImage
            media={block.media}
            className="aspect-4/3 rounded-4xl shadow-[0_1.5rem_4rem_rgb(23_32_25/12%)]"
          />
        </figure>

        <div>
          {block.title ? (
            <header className="mb-6 max-w-3xl">
              <h2 className="text-[clamp(2rem,4vw,3.8rem)] leading-[1.04] font-semibold tracking-[-0.055em]">
                {block.title}
              </h2>
            </header>
          ) : null}
          <RichTextContent value={block.content} />
          <LinkList links={block.ctaItems} className="mt-8" />
        </div>
      </div>
    </section>
  );
}