import { PageLink } from '#web-runtime/components/links';
import { RichTextContent } from '#web-runtime/components/rich-text';
import type { ArticlesBlock as ArticlesBlockData } from '#web-runtime/types';

export default function ArticlesBlock({ block }: { block: ArticlesBlockData }) {
  const columnClasses = {
    1: 'grid-cols-1',
    2: 'grid-cols-2 max-[45rem]:grid-cols-1',
    3: 'grid-cols-3 max-lg:grid-cols-2 max-[45rem]:grid-cols-1'
  }[Math.min(block.items.length, 3) as 1 | 2 | 3];

  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)]">
        {block.title || block.subtitle.content || block.cta ? (
          <header className="mb-[clamp(2rem,5vw,4rem)] flex flex-wrap items-end justify-between gap-x-8 gap-y-6">
            <div className="max-w-3xl">
              {block.title ? (
                <h2 className="text-[clamp(2rem,4vw,3.8rem)] leading-[1.04] font-semibold tracking-[-0.055em]">
                  {block.title}
                </h2>
              ) : null}
              <RichTextContent value={block.subtitle} className="mt-4 max-w-160 text-lg" />
            </div>
            {block.cta ? <PageLink link={block.cta} /> : null}
          </header>
        ) : null}

        <div className={`grid gap-4 ${columnClasses}`}>
          {block.items.map((item, index) => (
            <article
              className="flex min-w-0 flex-col items-start gap-4 rounded-[1.25rem] border border-[#d6d7cf] bg-white/50 p-[clamp(1.5rem,3vw,2.25rem)]"
              key={`${block.id}-item-${index}`}
            >
              {item.title ? (
                <h3 className="text-[1.35rem] leading-[1.18] font-semibold tracking-[-0.035em]">
                  {item.title}
                </h3>
              ) : null}
              <RichTextContent value={item.content} />
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}