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

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-5 md:grid-cols-2 xl:grid-cols-4">
        {copy.items.map((item, index) => {
          const Icon = capabilityIcons[index] ?? Globe;

          return (
            <div
              key={item.title}
              className="group flex h-full flex-col gap-5 rounded-surface border border-border bg-surface-1 p-6 shadow-card transition duration-300 ease-out hover:-translate-y-1 hover:shadow-panel"
            >
              <div className="flex h-12 w-12 items-center justify-center rounded-nested bg-brand-primary/10 text-brand-primary transition-transform duration-300 group-hover:-translate-y-0.5">
                <Icon className="h-5 w-5" />
              </div>
              <div className="space-y-2">
                <h3 className="text-title font-semibold text-foreground">
                  {item.title}
                </h3>
                <p className="text-small leading-relaxed text-muted-foreground">{item.description}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
