import { site } from '@/content/site';
import { typo } from '@/lib/typo';
import { Label } from '../Label';

export function Catalog({ roastDate }: { roastDate: string }) {
  const { catalog } = site;
  const packs = catalog.items.filter((item) => item.id !== 'drip');
  const drip = catalog.items.find((item) => item.id === 'drip');
  return (
    <section id="coffee" aria-labelledby="coffee-title" className="page-x section-y">
      <div className="container-page border-t-2 border-ink pt-10 lg:pt-14">
        <h2 id="coffee-title" className="text-headline font-extrabold">
          {typo(catalog.title)}
        </h2>
        <p className="mt-4 max-w-[46ch] text-lead">{typo(catalog.subtitle)}</p>
        <div className="mt-10 grid gap-4 md:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-6">
          {packs.map((item) => (
            <Label key={item.id} item={item} roastDate={roastDate} />
          ))}
          {drip && (
            <div className="md:col-span-2 lg:col-span-3">
              <Label item={drip} roastDate={roastDate} wide />
            </div>
          )}
        </div>
        <p className="mt-6 text-small">
          <a href={catalog.deliveryNote.href} className="inline-flex min-h-11 items-center underline">
            {typo(catalog.deliveryNote.text)}
          </a>
        </p>
      </div>
    </section>
  );
}