import { SectionHeading } from "../common/SectionHeading";
import { IconCard } from "../common/IconCard";
import { services as defaultServices } from "@/content/services";

interface ServicesGridProps {
  services?: {
    title: string;
    description: string;
    icon: string;
    href?: string;
  }[];
  title?: string;
  subtitle?: string;
  eyebrow?: string;
}

export function ServicesGrid({
  services = defaultServices,
  title = "Kompleksowe usługi dla Twojego domu",
  subtitle = "Zapewniamy profesjonalne wsparcie w zakresie instalacji sanitarnych, grzewczych, chłodniczych oraz prac wykończeniowych.",
  eyebrow = "Pełna Oferta"
}: ServicesGridProps) {
  return (
    <section className="py-16 md:py-24 bg-slate-50 border-t border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow={eyebrow}
          title={title}
          subtitle={subtitle}
          align="center"
        />

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mt-10">
          {services.map((service, idx) => (
            <IconCard
              key={idx}
              title={service.title}
              description={service.description}
              iconName={service.icon}
              href={service.href}
            />
          ))}
        </div>
      </div>
    </section>
  );
}