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

const {
  title = "",
  subtitle = "",
  tagline = "",
  items = [],
  columns = 2,

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

<WidgetWrapper
  id={id}
  isDark={isDark}
  containerClass={`max-w-screen-xl mx-auto ${classes?.container ?? ""}`}
  bg={bg}
>
  <Headline title={title} subtitle={subtitle} tagline={tagline} />
  <ItemGrid
    items={items}
    columns={columns}
    defaultIcon="tabler:chevron-right"
    classes={{
      panel: 'max-w-none',
      icon: "flex-shrink-0 mt-1 w-6 h-6 text-primary",
    }}
  />
</WidgetWrapper>