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

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

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">
    {
      services.map((s) => (
        <Card class="group relative overflow-hidden hover:bg-muted/50 hover:shadow-md">
          <div class="absolute -right-4 -top-4 text-8xl opacity-10 transition-transform group-hover:scale-110 group-hover:rotate-12 select-none">
            <Icon name={s.icon} class="w-32 h-32" />
          </div>
          <div class="text-left relative z-10">
            <div class="text-4xl mb-6 text-primary">
              <Icon name={s.icon} class="w-12 h-12" />
            </div>
            <h3 class="text-2xl font-bold text-foreground mb-4">{s.title}</h3>
            <p class="text-muted-foreground leading-relaxed">{s.description}</p>
            <button class="mt-8 text-primary font-semibold flex items-center gap-2 group/btn hover:underline transition-all">
              View details
              <span class="transition-transform group-hover/btn:translate-x-1">
                →
              </span>
            </button>
          </div>
        </Card>
      ))
    }
  </div>
</WidgetWrapper>
