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

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

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

<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 grid-cols-1 md:grid-cols-3 gap-8">
    {
      features.map((feature) => (
        <Card>
          {feature.icon && (
            <div
              class={`w-12 h-12 rounded-lg flex items-center justify-center mb-6 ${feature.iconClass ? feature.iconClass : "bg-primary/10 text-primary"}`}
            >
              <Icon name={feature.icon} class="w-6 h-6" />
            </div>
          )}
          <h3 class="text-xl font-bold text-foreground mb-3">
            {feature.title}
          </h3>
          <p class="text-muted-foreground text-sm">{feature.description}</p>
        </Card>
      ))
    }
  </div>
</WidgetWrapper>