import Image from "next/image";
import SectionHeading from "./SectionHeading";
import type { HomeClient } from "@/services/pages/public/home";

const Clients = ({
  heading,
  subtitle,
  clients = [],
}: {
  heading?: string;
  subtitle?: string;
  clients?: HomeClient[];
}) => {
  const logoList = [
    ...clients.map((c) => ({ name: c.client_name, logo: c.client_image_url })),
    ...clients.map((c) => ({ name: c.client_name, logo: c.client_image_url })),
  ];
  return (
    <section id="clients" className="petro-section">
      <div className="petro-container">
        <SectionHeading
          title={heading}
          subtitle={subtitle}
        />
      </div>
      {logoList.length > 0 && (
        <div className="overflow-hidden">
          <div className="flex animate-scroll-left gap-12 py-8">
            {logoList.map((client, i) => (
              <div
                key={i}
                className="flex-shrink-0 px-10 py-6 bg-card rounded-sm flex items-center justify-center min-w-[200px]"
                style={{ boxShadow: "var(--shadow-card)" }}
              >
                <Image
                  src={client.logo}
                  alt={`${client.name} logo`}
                  width={120}
                  height={48}
                  className="h-12 w-auto max-w-[120px] object-contain"
                />
              </div>
            ))}
          </div>
        </div>
      )}
    </section>
  );
};

export default Clients;