Bento grids 01

import type { CtaProps } from '../../shared/cta'
import { Cta } from '../../shared/cta'
import { cn } from '@/lib/utils'

export type PrimaryItemMedia = {
  src: string
  title: string
}

export type PrimaryItem = {
  title: string
  description: string
  cta: CtaProps
  media: PrimaryItemMedia
}

export type GridItem = {
  title: string
  description: string
  media: PrimaryItemMedia
}

export interface BentoGrids01Props {
  className?: string
  primary: PrimaryItem
  items: GridItem[]
}

export function BentoGrids01({
  className,
  primary,
  items,
}: Readonly<BentoGrids01Props>) {
  return (
    <section className="w-full">
      <div className="mx-auto w-full max-w-6xl px-6 py-12 sm:py-16">
        <div
          className={cn('grid grid-cols-1 gap-6 md:grid-cols-3', className)}
          aria-label="Bento grids 01"
        >
          <article className="bg-card col-span-1 overflow-hidden rounded-md p-4 md:col-span-2">
            <div className="grid h-full grid-cols-1 items-stretch gap-6 md:grid-cols-2">
              <div className="flex flex-col justify-between gap-6">
                <div className="space-y-3">
                  <h2 className="text-lg font-semibold tracking-tight md:text-xl">
                    {primary.title}
                  </h2>
                  <p className="text-muted-foreground text-sm whitespace-pre-line">
                    {primary.description}
                  </p>
                </div>

                <div className="flex">
                  <Cta cta={{ ...primary.cta, variant: 'outline' }} />
                </div>
              </div>

              <div className="bg-muted relative min-h-64 w-full overflow-hidden rounded-md md:min-h-0">
                <img
                  src={primary.media.src}
                  alt={primary.media.title}
                  loading="lazy"
                  decoding="async"
                  className="absolute inset-0 size-full object-cover"
                />
              </div>
            </div>
          </article>

          {items.map((item) => (
            <article
              key={`${item.title}-${item.media.src}`}
              className="bg-card col-span-1 overflow-hidden rounded-md p-4"
            >
              <div className="flex h-full flex-col gap-6">
                <div className="bg-muted relative aspect-[4/3] overflow-hidden rounded-md">
                  <img
                    src={item.media.src}
                    alt={item.media.title}
                    loading="lazy"
                    decoding="async"
                    className="absolute inset-0 size-full object-cover"
                  />
                </div>
                <div className="space-y-1">
                  <h3 className="text-base font-medium">{item.title}</h3>
                  <p className="text-muted-foreground text-sm whitespace-pre-line">
                    {item.description}
                  </p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  )
}