import Image from "next/image";
import Link from "next/link";
import { getServiceBySlug, isSatelliteServiceSlug } from "@/data/services";

interface RelatedPagesProps {
  slugs: string[];
}

export default function RelatedPages({ slugs }: RelatedPagesProps) {
  const relatedServices = slugs
    .map((slug) => getServiceBySlug(slug))
    .filter((service) => service && !isSatelliteServiceSlug(service.slug));

  if (relatedServices.length === 0) return null;

  return (
    <section className="py-12 px-4" aria-label="Páginas relacionadas">
      <div className="max-w-5xl mx-auto">
        <h2 className="text-2xl font-bold text-primary mb-8 text-center">
          Páginas Relacionadas
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {relatedServices.map((service) => (
            <Link
              key={service!.slug}
              href={`/${service!.slug}`}
              className="group block bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
              <div className="relative aspect-[4/3] bg-gray-200">
                <Image
                  src={`/images/informacoes/${service!.imageSourceSlug || service!.slug}-01.webp`}
                  alt={`Imagem ilustrativa de ${service!.title}`}
                  fill
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                  loading="lazy"
                />
              </div>
              <div className="p-4">
                <h3 className="text-sm font-semibold text-primary group-hover:text-secondary transition-colors">
                  {service!.title}
                </h3>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}