import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
import Ai21Logo from "@/components/logos/Ai21";
import ClaudeLogo from "@/components/logos/Claude";
import BaiduCloudLogo from "@/components/logos/BaiduCloud";
import ByteDanceLogo from "@/components/logos/ByteDance";
import DeepSeekLogo from "@/components/logos/DeepSeek";
import DeepMindLogo from "@/components/logos/DeepMind";
import MinimaxLogo from "@/components/logos/Minimax";
import MistralLogo from "@/components/logos/Mistral";
import MoonshotLogo from "@/components/logos/Moonshot";
import TencentCloudLogo from "@/components/logos/TencentCloud";
import OpenAILogo from "@/components/logos/OpenAI";
import XAILogo from "@/components/logos/XAI";

const logos = [
  { id: "ai21", Component: Ai21Logo, label: "AI21" },
  { id: "claude", Component: ClaudeLogo, label: "Claude" },
  { id: "baidu", Component: BaiduCloudLogo, label: "Baidu Cloud" },
  { id: "bytedance", Component: ByteDanceLogo, label: "ByteDance" },
  { id: "deepseek", Component: DeepSeekLogo, label: "DeepSeek" },
  { id: "deepmind", Component: DeepMindLogo, label: "DeepMind" },
  { id: "minimax", Component: MinimaxLogo, label: "Minimax" },
  { id: "mistral", Component: MistralLogo, label: "Mistral" },
  { id: "moonshot", Component: MoonshotLogo, label: "Moonshot" },
  { id: "tencent", Component: TencentCloudLogo, label: "Tencent Cloud" },
  { id: "openai", Component: OpenAILogo, label: "OpenAI" },
  { id: "xai", Component: XAILogo, label: "xAI" },
];

const splitLogoRows = () => {
  const midpoint = Math.ceil(logos.length / 2);
  return [logos.slice(0, midpoint), logos.slice(midpoint)];
};

export const AgentLogos = () => {
  const rows = splitLogoRows();

  return (
    <section className="relative isolate overflow-hidden bg-[#121212] py-4">
      <div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-black to-transparent" />
      <div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-black to-transparent" />
      <div className="flex w-full flex-col gap-1 px-0">
        {rows.map((row, idx) => (
          <InfiniteMovingCards
            key={`logos-row-${idx}`}
            items={row.map(({ id, Component, label }) => (
              <div
                key={id}
                className="flex h-24 w-36 items-center justify-center bg-transparent px-4"
                aria-label={label}
              >
                <Component />
              </div>
            ))}
            direction={idx % 2 === 0 ? "left" : "right"}
            speed="slow"
            pauseOnHover={true}
            className="w-full"
          />
        ))}
      </div>
    </section>
  );
};