import type { CmsPartnerContent } from "@/types/cms-landing";

const FALLBACK: { name: string; src: string }[] = [
  { name: "Tableau", src: "/image/tableu.png" },
  { name: "TVU Networks", src: "/image/tvu.png" },
  { name: "AWS", src: "/image/aws.png" },
  { name: "Dell", src: "/image/dell.png" },
  { name: "Zenlayer", src: "/image/zen.png" },
  { name: "Ui", src: "/image/uipath.png" },
];

export default function Technology({
  partners,
}: {
  partners?: CmsPartnerContent[] | null;
}) {
  const list =
    partners && partners.length > 0
      ? partners.map((p) => ({
          name: p.primary_title,
          src: p.image_url || p.image_path || "",
        }))
      : FALLBACK;

  const loop = [...list, ...list];

  return (
    <section className="relative overflow-hidden bg-gradient-to-r from-[#faf6ee] to-[#f4efe6] py-14">
      <div className="container mx-auto px-6">
        <p className="mb-8 text-center text-lg font-semibold tracking-widest text-gray-500">
          TECHNOLOGY PARTNERS
        </p>

        <div className="relative w-full overflow-hidden">
          <div className="flex w-max animate-tech-scroll gap-2">
            {loop.map((tech, index) => (
              <div
                key={`${tech.name}-${index}`}
                className="flex min-w-[140px] items-center justify-center opacity-80 transition hover:opacity-100"
              >
                {tech.src && /^https?:\/\//i.test(tech.src) ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={tech.src}
                    alt={tech.name}
                    width={120}
                    height={80}
                    className="max-h-[80px] object-contain"
                  />
                ) : tech.src ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={tech.src}
                    alt={tech.name}
                    width={120}
                    height={50}
                    className="object-contain"
                  />
                ) : (
                  <span className="text-sm text-gray-500">{tech.name}</span>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}