import Image from "next/image";

type Certificate = {
  title: string;
  image: string;
};

type CertificateSectionProps = {
  title: string;
  subtitle: string;
  countLabel: string;
  count: string;
  certificates: Certificate[];
};

export function CertificateSection({
  title,
  subtitle,
  countLabel,
  count,
  certificates,
}: CertificateSectionProps) {
  return (
    <section className="bg-white py-16 lg:py-24">
      <div className="mx-auto max-w-[1440px] px-6 lg:px-[120px]">
        {/* Header */}
        <div className="flex flex-col justify-between gap-6 lg:flex-row lg:items-end">
          <div>
            <h2 className="text-[26px] font-bold text-[#04388b]">{title}</h2>
            <p className="mt-4 text-[36px] font-medium leading-normal text-[#7f7f7f]">
              {subtitle}
            </p>
          </div>
          <div className="flex items-end gap-2">
            <span className="text-[26px] font-medium text-[#7f7f7f]">
              {countLabel}
            </span>
            <span className="text-[64px] font-bold leading-none text-[#7f7f7f]">
              {count}
            </span>
            <span className="text-[26px] font-medium text-[#04388b]">项</span>
          </div>
        </div>

        {/* Certificates */}
        <div className="mt-12 bg-[#eaebf0] p-8 lg:p-[40px]">
          <div className="grid grid-cols-2 gap-6 lg:grid-cols-4">
            {certificates.map((cert) => (
              <div key={cert.title} className="flex flex-col items-center">
                <div className="relative h-[184px] w-[130px] overflow-hidden">
                  <Image
                    src={cert.image}
                    alt={cert.title}
                    fill
                    className="object-cover"
                    sizes="130px"
                  />
                </div>
                <p className="mt-4 text-center text-[12px] text-[#7f7f7f]">
                  {cert.title}
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* Pagination dots */}
        <div className="mt-6 flex justify-center gap-2">
          <div className="h-[8px] w-[42px] bg-[#04388b]" />
          <div className="h-[8px] w-[42px] bg-[#d9d9d9]" />
        </div>
      </div>
    </section>
  );
}
