import { Bot, Database, Globe, ServerCog } from "lucide-react";

import { AppCard } from "@/components/ui/app-card";
import { SectionHeading } from "./section-heading";
import type { CapabilitiesSectionCopy } from "./types";

type CapabilitiesSectionProps = {
  copy: CapabilitiesSectionCopy;
};

const capabilityIcons = [Globe, Database, ServerCog, Bot];

export function CapabilitiesSection({ copy }: CapabilitiesSectionProps) {
  return (
    <section className="space-y-8">
      <SectionHeading
        eyebrow={copy.eyebrow}
        title={copy.title}
        description={copy.description}
      />

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4 xl:gap-6">
        {copy.items.map((item, index) => {
          const Icon = capabilityIcons[index] ?? Globe;

          return (
            <AppCard
              key={item.title}
              layer="single"
              interactive
              className="group border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:shadow-panel"
            >
              <div className="flex h-full flex-col gap-5 p-6">
                <div className="flex h-11 w-11 items-center justify-center rounded-nested border border-border/70 bg-background text-foreground transition-transform duration-300 group-hover:-translate-y-0.5">
                  <Icon className="h-5 w-5" />
                </div>
                <div className="space-y-3">
                  <h3 className="text-xl font-semibold tracking-[-0.04em] text-foreground">
                    {item.title}
                  </h3>
                  <p className="text-sm leading-7 text-muted-foreground">{item.description}</p>
                </div>
              </div>
            </AppCard>
          );
        })}
      </div>
    </section>
  );
}