import React from "react";
import type { ServiceLink } from "../types";

export function ServiceLinks({ items }: { items: ServiceLink[] }) {
  return (
    <section className="mt-12">
      <div className="mx-auto max-w-screen-2xl px-4">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {items.map((s) => (
            <a key={s.id} href={s.href ?? "#"} className="group flex items-center gap-3 rounded-lg bg-white border border-gray-100 p-4 hover:shadow-md transition">
              {s.icon && <img src={s.icon} alt={s.title} className="h-6 w-6 object-contain" />}
              <span className="text-gray-800 group-hover:text-gray-900">{s.title}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}