---
import MaxWidthWrapper from "./other/max.width.wrapper";
import SectionHeading from "./atoms/section.heading";
import { cn } from "@/lib/utils";
import Title from "./atoms/title";

const { variant = "lime", services } = Astro.props;

const colorMap =
    variant === "lime"
        ? {
              primary: "bg-lime-100 text-lime-600",
              secondary: "bg-lime-100 text-lime-700",
              tertiary: "bg-lime-100 text-lime-600",
              quaternary: "bg-lime-100 text-lime-700",
          }
        : {
              primary: "bg-amber-100 text-amber-600",
              secondary: "bg-amber-100 text-amber-700",
              tertiary: "bg-amber-100 text-amber-600",
              quaternary: "bg-amber-100 text-amber-700",
          };
---

<MaxWidthWrapper id="services" className="w-full space-y-20">
    <SectionHeading
        title="Everything you need in one package"
        subtitle="Our Services"
    />

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
        {
            services.map((service) => (
                <div
                    class="flex items-center text-center flex-col gap-4"
                    {...service.aos}
                >
                    <div
                        class={cn(
                            "grid place-items-center w-20 h-20 rounded-full",
                            // @ts-ignore
                            colorMap[service.color],
                        )}
                    >
                        <service.icon className="h-8 w-auto" />
                    </div>
                    <Title title={service.title} size="h3" />
                    <span class="text-sm text-gray-700">
                        {service.description}
                    </span>
                </div>
            ))
        }
    </div>
</MaxWidthWrapper>