---
import type { ItemGrid as Props } from '~/types';
import { twMerge } from 'tailwind-merge';
import Button from './Button.astro';

const { items = [], columns, classes = {} } = Astro.props;

const {
  container: containerClass = '',
  panel: panelClass = '',
  title: titleClass = '',
  description: descriptionClass = '',
  action: actionClass = '',
} = classes;
---

{
  items && (
    <div
      class={twMerge(
        `grid mx-auto gap-8 md:gap-y-12 ${
          columns === 4
            ? 'lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2'
            : columns === 3
              ? 'lg:grid-cols-3 sm:grid-cols-2'
              : columns === 2
                ? 'sm:grid-cols-2 '
                : ''
        }`,
        containerClass
      )}
    >
      {items.map(({ title, description, image, callToAction, classes: itemClasses = {} }) => (
        <div>
          <div class={twMerge('flex flex-col max-w-md', panelClass, itemClasses?.panel)}>
            <div class="flex justify-center">
              {(image) && (
                <img src={image.src} alt="A bird." class=" rounded-full h-20 w-20" />
              )}
            </div>
            <div class="mt-0.5">
              {title && (
                <h3 class={twMerge('text-3xl font-bold text-center', titleClass, itemClasses?.title)}>{title}</h3>
              )}
              {description && (
                <p
                  class={twMerge(`${title ? 'mt-3' : ''} text-center text-muted`, descriptionClass, itemClasses?.description)}
                  set:html={description}
                />
              )}
              {callToAction && (
                <div class={twMerge(`${title || description ? 'mt-3' : ''}`, actionClass, itemClasses?.actionClass)}>
                  <Button variant="link" {...callToAction} />
                </div>
              )}
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}