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

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

const {
  container: containerClass = '',
  panel: panelClass = '',
  title: titleClass = '',
  description: descriptionClass = '',
  icon: defaultIconClass = 'text-primary',
  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, icon, callToAction, classes: itemClasses = {} }) => (
        <div class="intersect-once motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade">
          <div class={twMerge('flex flex-row max-w-md', panelClass, itemClasses?.panel)}>
            <div class="flex justify-center">
              {(icon || defaultIcon) && (
                <Icon
                  name={icon || defaultIcon}
                  class={twMerge('w-7 h-7 mr-2 rtl:mr-0 rtl:ml-2', defaultIconClass, itemClasses?.icon)}
                />
              )}
            </div>
            <div class="mt-0.5">
              {title && <h3 class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</h3>}
              {description && (
                <p
                  class={twMerge(`${title ? 'mt-3' : ''} 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>
  )
}