---
// Copyright © onWidget <https://github.com/onwidget>
// SPDX-License-Identifier: MIT
import type { ItemGrid as Props } from "~/types";
import { twMerge } from "tailwind-merge";
import Button from "./Button.astro";
import { Icon } from "@astrojs/starlight/components";
import { toStarlightIconName } from "~/utils/iconNames";

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

const {
    container: containerClass = "",
    panel: panelClass = "",
    title: titleClass = "",
    description: descriptionClass = "",
    icon: defaultIconClass = "text-primary",
    action: actionClass = "",
} = classes;
---

{
  items && items.length > 0 && (
    <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={toStarlightIconName(icon || defaultIcon) as any}
                  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>
  )
}
