---
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
import ItemGrid from "~/components/ui/ItemGrid.astro";
import Headline from "~/components/ui/Headline.astro";
import type { Features } from "~/types";

const {
  title = await Astro.slots.render("title"),
  subtitle = await Astro.slots.render("subtitle"),
  tagline = await Astro.slots.render("tagline"),
  items = [],
  columns = 2,

  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render("bg"),
} = Astro.props as Features;
---

<WidgetWrapper
  id={id}
  isDark={isDark}
  containerClass={`max-w-5xl ${classes?.container ?? ""}`}
  bg={bg}
>
  <Headline
    title={title}
    subtitle={subtitle}
    tagline={tagline}
    classes={classes?.headline}
  />
  <ItemGrid
    items={items}
    columns={columns}
    classes={{
      container: "",
      title: "md:text-[1.3rem]",
      icon: "text-white bg-primary rounded-full w-10 h-10 p-2 md:w-12 md:h-12 md:p-3 mr-4 rtl:ml-4 rtl:mr-0",
      ...((classes?.items as {}) ?? {}),
    }}
  />
</WidgetWrapper>