import { LinkList } from '#web-runtime/components/links';
import { RichTextContent } from '#web-runtime/components/rich-text';
import type { BannerBlock as BannerBlockData } from '#web-runtime/types';

const styleClasses: Record<BannerBlockData['style'], string> = {
  info: 'border-[#a9bed9] bg-[#eef3fb]',
  success: 'border-[#99d900] bg-[#f0fbd4]',
  warning: 'border-[#e3b341] bg-[#fdf3d8]',
  error: 'border-[#e0604d] bg-[#fdeae5]'
};

export default function BannerBlock({ block }: { block: BannerBlockData }) {
  return (
    <section
      className="border-b border-[#d6d7cf] py-[clamp(2.5rem,5vw,4rem)] 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)]">
        <div
          className={`flex flex-wrap items-center justify-between gap-x-8 gap-y-5 rounded-[1.25rem] border p-[clamp(1.5rem,3vw,2.25rem)] ${styleClasses[block.style]}`}
          data-banner-style={block.style}
        >
          <RichTextContent
            value={block.content}
            className="min-w-64 flex-1 basis-96 text-[#172019]"
          />
          <LinkList links={block.ctaItems} className="shrink-0" />
        </div>
      </div>
    </section>
  );
}