"use client";

import { motion } from "framer-motion";
import { useLocale } from "next-intl";
import useEmblaCarousel from "embla-carousel-react";
import AutoScroll from "embla-carousel-auto-scroll";
import Image from "next/image";
import Link from "next/link";

interface PartnerItem {
  src: string;
  alt: string;
  href: string;
}

export default function Partner({ partners }: { partners: PartnerItem[] }) {
  const locale = useLocale();
  const [emblaRef] = useEmblaCarousel(
    {
      loop: true,
      align: "center",
      direction: locale === "ar" ? "rtl" : "ltr",
      dragFree: true,
    },
    [
      AutoScroll({
        playOnInit: true,
        speed: 2,
        stopOnInteraction: false,
        stopOnMouseEnter: false,
      }),
    ],
  );

  return (
    <section className="custom-container my-6">
      <div className="max-w-7xl mx-auto">
        <motion.h2
          initial={{ opacity: 0, y: -15 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.35 }}
          className="text-2xl font-extrabold mb-6 text-[color:var(--g1)] text-start will-change-transform"
        >
          {locale === "ar" ? "شركاء النجاح" : "Success Partners"}
        </motion.h2>

        <div className="border rounded-2xl p-6 bg-white shadow-lg">
          <div className="embla overflow-hidden" ref={emblaRef}>
            <div className="embla__container flex items-center gap-10">
              {partners.map((partner, i) => (
                <Link
                  key={i}
                  href={partner.href}
                  prefetch={false}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="embla__slide flex-shrink-0 flex items-center justify-center"
                >
                  <Image
                    src={partner.src}
                    alt={partner.alt}
                    width={0}
                    height={48}
                    sizes="100vw"
                    loading="lazy"
                    decoding="async"
                    // Next/Image optimizer blocks private IPs (localhost/127.0.0.1/::1). Bypass optimizer for local backend images.
                    unoptimized={/^(https?:\/\/)(localhost|127\.0\.0\.1|\[::1\])(?::\d+)?\//.test(
                      partner.src,
                    )}
                    className="h-12 w-auto object-contain transition-transform duration-300 hover:scale-105"
                    style={{ width: "auto" }}
                  />
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}