import { Marquee } from "../ui/marquee";

export function PartnersMarquee() {
  const partners = [
    {
      name: "Conductor Orchestra",
      logo: "https://t3.ftcdn.net/jpg/05/71/43/76/360_F_571437617_ZNppyF5qpbJn9dYifhjWEQkgjbZNBXP9.jpg",
    },
    {
      name: "Chicago Symphony Orchestra",
      logo: "https://upload.wikimedia.org/wikipedia/commons/1/1f/Wiki-CSO_logo2024_stacked-whitebg.png",
    },
    {
      name: "Toronto Symphony Orchestra",
      logo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfThsC3B2BGCKjnyr_IMiJmp-0jI9I9blZrw&s",
    },
    {
      name: "Los Angeles Chamber Orchestra",
      logo: "https://admin.itsnicethat.com/images/TOHFR2DIydoDTaGM6NbfVRFZfJU=/168760/format-webp%7Cwidth-2880/5d947a047fa44cbd2200fd0f.jpg",
    },
    {
      name: "Richmond Symphony Orchestra",
      logo: "https://richmondsymphony.org/wp-content/uploads/2021/07/rso-logo-2023.png",
    },
  ];

  return (
    <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
      <Marquee>
        {partners.map((partner) => (
          <div
            key={partner.name}
            className="flex flex-col items-center justify-center p-4 bg-white border-2 border-gray-300 rounded-lg shadow-md"
          >
            <img
              src={partner.logo}
              alt={`${partner.name} logo`}
              className="max-h-24"
            />
            <p>{partner.name}</p>
          </div>
        ))}
      </Marquee>
      <div className="from-background pointer-events-none absolute inset-y-0 left-0 w-4 bg-linear-to-r"></div>
      <div className="from-background pointer-events-none absolute inset-y-0 right-0 w-4 bg-linear-to-l"></div>
    </div>
  );
}