---
import IconCalculator from "@tabler/icons/outline/calculator.svg";
import IconCurrencyDollar from "@tabler/icons/outline/currency-dollar.svg";
import IconPercentage from "@tabler/icons/outline/circle-percentage.svg";
import IconClock from "@tabler/icons/outline/clock-2.svg";
import type { HTMLAttributes } from "astro/types";
import { tv } from "tailwind-variants";

export interface FeatureCard {
  icon: any;
  title: string;
  description: string;
}

interface Props extends HTMLAttributes<"section"> {
  /** Section title */
  title?: string;
  /** Section description */
  description?: string;
  /** Array of feature cards */
  features?: FeatureCard[];
}

const feature6Styles = tv({
  base: "@container mx-auto w-full max-w-7xl px-4 py-24",
});

const {
  title = "Herramientas disponibles",
  description = "Apps web gratuitas diseñadas para ayudarte en tu día a día. Sin registro, sin anuncios, sin complicaciones.",
  features = [
    {
      icon: IconCalculator,
      title: "Calculadora",
      description: "Realiza cálculos rápidos y precisos con nuestra calculadora online.",
    },
    {
      icon: IconCurrencyDollar,
      title: "Conversor de divisas",
      description: "Convierte entre diferentes monedas con tipos de cambio actualizados.",
    },
    {
      icon: IconPercentage,
      title: "Calculadora de porcentajes",
      description: "Calcula porcentajes, incrementos y descuentos de forma sencilla.",
    },
    {
      icon: IconClock,
      title: "Zonas horarias",
      description: "Convierte horarios entre diferentes zonas horarias del mundo.",
    },
  ],
  class: className,
  ...rest
} = Astro.props;
---

<section class={feature6Styles({ class: className })} {...rest}>
  <div class="mb-12 text-center">
    <h2 class="font-heading mb-4 text-3xl font-semibold tracking-tight text-foreground @xl:text-4xl @3xl:text-5xl">
      {title}
    </h2>
    <p class="text-muted-foreground mx-auto max-w-2xl text-pretty @lg:text-lg">
      {description}
    </p>
  </div>

  <div class="grid gap-12 @lg:grid-cols-2 @3xl:grid-cols-4 @3xl:gap-16">
    {
      features.map((feature) => (
        <div class="text-center">
          <div class="bg-muted mx-auto mb-4 inline-flex rounded-2xl p-4">
            <feature.icon class="text-foreground size-8" aria-hidden="true" />
          </div>
          <h3 class="font-heading mb-2 text-lg font-semibold">{feature.title}</h3>
          <p class="text-muted-foreground mx-auto max-w-[300px] text-sm text-pretty">
            {feature.description}
          </p>
        </div>
      ))
    }
  </div>
</section>
