import { Wrench, Package, Store } from "lucide-react";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { SlotLink } from "@/components/SlotLink";
import type { SlotMediaItem } from "@/lib/static-images";

const icons = [Store, Package, Wrench];

export function Services({ items }: { items: SlotMediaItem[] }) {
  return (
    <section className="relative z-10 -mt-px bg-white">
      <Container>
        <div className="grid border-x border-line lg:grid-cols-3">
          {items.map((service, index) => {
            const Icon = icons[index] ?? Store;
            return (
              <SlotLink
                key={service.id}
                href={service.href}
                className={`group flex items-start gap-5 px-6 py-8 sm:px-8 ${index < items.length - 1 ? "border-b border-line lg:border-b-0 lg:border-l" : ""}`}
              >
                {service.image ? (
                  <Placeholder
                    src={service.image}
                    fallbackSrc={service.fallbackSrc}
                    alt=""
                    className="mt-1 size-16 shrink-0 object-contain sm:size-[4.5rem]"
                  />
                ) : (
                  <Icon className="mt-1 size-16 shrink-0 text-brand sm:size-[4.5rem]" strokeWidth={1.25} aria-hidden />
                )}
                <span>
                  <span className="font-latin block text-[10px] tracking-[0.22em] text-muted uppercase">
                    0{index + 1}
                  </span>
                  <h2 className="text-[18px] leading-7 font-bold group-hover:text-brand">{service.title}</h2>
                  {service.text ? <p className="text-[13px] leading-6 text-muted">{service.text}</p> : null}
                </span>
              </SlotLink>
            );
          })}
        </div>
      </Container>
    </section>
  );
}