---
import { Icon } from "astro-icon/components";
import { twMerge } from "tailwind-merge";
import type { ItemGrid } from "~/types";
import CTA from "./CTA.astro";

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

const {
  container: containerClass = "",
  // container: containerClass = "md:grid-cols-2",
  panel: panelClass = "",
  title: titleClass = "",
  description: descriptionClass = "",
  icon: defaultIconClass = "text-primary",
} = classes;
---

{
  items && (
    <div
      class={twMerge(
        `grid mx-auto gap-8 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>
            <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>
                <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="mt-2 text-primary cursor-pointer">
                    <CTA callToAction={callToAction} />
                  </div>
                )}
              </div>
            </div>
          </div>
        )
      )}
    </div>
  )
}