---
import WidgetWrapper from "./WidgetWrapper.astro";
import type { ValuesProps } from "@/types/types";
import Card from "@/components/ui/Card.astro";
import Headline from "@/components/ui/Headline.astro";
import { Icon } from "astro-icon/components";

const {
  items = [],
  columns = 2,
  title,
  subtitle,
  tagline,
  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render("bg"),
} = Astro.props as ValuesProps;

const { container: containerClassProp = "", ...otherClasses } = classes;

const gridCols = {
  1: "grid-cols-1",
  2: "grid-cols-1 md:grid-cols-2",
  3: "grid-cols-1 md:grid-cols-3",
  4: "grid-cols-1 md:grid-cols-4",
};
---

<WidgetWrapper
  id={id}
  isDark={isDark}
  containerClass={` ${containerClassProp}`}
  bg={bg}
  classes={otherClasses}
>
  <Headline
    title={title}
    subtitle={subtitle}
    tagline={tagline}
    classes={{
      container: "max-w-3xl mx-auto text-center",
    }}
  />
  <div class={`grid ${gridCols[columns]} gap-8 text-left`}>
    {
      items.map((item) => (
        <Card>
          {item.icon && (
            <div class="mb-4 text-primary text-4xl">
              <Icon name={item.icon} class="w-12 h-12" />
            </div>
          )}
          <h3 class="text-xl font-bold text-foreground mb-2">{item.title}</h3>
          <p class="text-sm text-muted-foreground">{item.description}</p>
        </Card>
      ))
    }
  </div>
</WidgetWrapper>
