import { Headphones, RefreshCw, ShieldCheck, Truck } from "lucide-react";
import { Container } from "@/components/Container";
import { siteFeatures } from "@/lib/data";

const icons = {
  headset: Headphones,
  shield: ShieldCheck,
  refresh: RefreshCw,
  truck: Truck,
};

export function SiteFeatures() {
  return (
    <section className="pt-8">
      <Container>
        <div className="overflow-hidden rounded-2xl border border-line bg-white">
          <div className="grid grid-cols-2 divide-x divide-x-reverse divide-line lg:grid-cols-4">
            {siteFeatures.map((feature) => {
              const Icon = icons[feature.icon];
              return (
                <div key={feature.title} className="flex items-center gap-3 px-5 py-5">
                  <span className="grid size-12 shrink-0 place-items-center rounded-xl bg-sky text-primary">
                    <Icon className="size-6" strokeWidth={1.75} />
                  </span>
                  <div>
                    <h3 className="text-[13.5px] font-bold text-navy">{feature.title}</h3>
                    <p className="mt-0.5 text-[12px] leading-5 text-muted">{feature.text}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Container>
    </section>
  );
}