"use client";
 
import {
  BoardMathIcon,
  ChipIcon,
  LockKeyIcon,
  Mail02Icon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { motion } from "motion/react";
import { useEffect, useState } from "react";
 
const positions = [
  { x: 0, y: -15 },
  { x: -20, y: 20 },
  { x: 20, y: 20 },
];
 
const SpinningCards = () => {
  const [order, setOrder] = useState([0, 1, 2]);
 
  useEffect(() => {
    const id = setInterval(() => {
      setOrder((prev) => [...prev.slice(1), prev[0]]);
    }, 1500);
 
    return () => clearInterval(id);
  }, []);
 
  const columnAnimation = (idx: number) => ({
    initial: { opacity: 0.005 },
    animate: { opacity: 0.05 },
    transition: {
      duration: 2,
      repeat: Infinity,
      repeatType: "reverse" as const,
      ease: "easeInOut" as const,
      delay: idx * 0.25,
    },
  });
 
  return (
    <div className="size-full  flex items-center justify-center">
      <div className="size-100 flex flex-col bg-background gap-4 items-center pt-15 relative">
        <div className="flex flex-col gap-2 text-center">
          <h1 className="text-lg font-semibold">Higher approval rates</h1>
          <p className="text-xs text-muted-foreground">
            Optiized payment routing and AI models reduced declicnes and improve
            approval rates by up to 15%
          </p>
        </div>
        <div className="flex gap-2 z-10">
          {[ChipIcon, LockKeyIcon, BoardMathIcon].map((Icon, idx) => (
            <div
              key={idx}
              className="size-10 flex items-center justify-center bg-muted"
            >
              <HugeiconsIcon
                icon={Icon}
                className="size-5 icon-pulse text-muted-foreground"
              />
            </div>
          ))}
        </div>
 
        <div className="h-20 w-[60%]  absolute top-4 bottom-0 my-auto flex gap-2 z-0">
          <div className="flex-1 grid grid-cols-5 gap-1 ">
            {Array.from({ length: 5 }).map((_, idx) => (
              <motion.div
                key={idx}
                {...columnAnimation(idx)}
                className="grid gap-1"
              >
                {Array.from({ length: 4 }).map((_, idx) => (
                  <div key={idx} className="flex items-center justify-center">
                    <HugeiconsIcon icon={Mail02Icon} className="size-3" />
                  </div>
                ))}
              </motion.div>
            ))}
          </div>
 
          <div className="flex-1 grid grid-cols-5 gap-1 ">
            {Array.from({ length: 5 }).map((_, idx) => (
              <motion.div
                key={idx}
                {...columnAnimation(idx + 5)}
                className="grid gap-1"
              >
                {Array.from({ length: 4 }).map((_, idx) => (
                  <div key={idx} className="flex items-center justify-center">
                    <HugeiconsIcon icon={Mail02Icon} className="size-3" />
                  </div>
                ))}
              </motion.div>
            ))}
          </div>
 
          <div className="absolute h-full bg-linear-to-r from-background to-transparent w-10 left-0 " />
          <div className="absolute h-full bg-linear-to-l from-background to-transparent w-10 right-0 " />
        </div>
 
        <div className="size-38 relative flex items-center justify-center rounded-full mt-2">
          {order.map((id, index) => {
            const pos = positions[index];
 
            return (
              <motion.svg
                key={id}
                animate={{ x: pos.x, y: pos.y }}
                transition={{
                  duration: 0.9,
                  ease: [0.4, 0, 0.2, 1],
                }}
                className="size-22 absolute stroke-3 fill-primary/50 stroke-primary"
                viewBox="0 0 485.688 485.688"
                style={{
                  zIndex: 10 - index,
                }}
              >
                <path d="M364.269,453.155H121.416L0,242.844L121.416,32.533h242.853l121.419,210.312L364.269,453.155z" />
              </motion.svg>
            );
          })}
          <div className="bg-background size-full rounded-full absolute" />
        </div>
 
        <div className="w-px h-[calc(100%+4rem)] absolute top-1/2 -translate-y-1/2 bg-border left-0" />
        <div className="w-px h-[calc(100%+4rem)] absolute top-1/2 -translate-y-1/2 bg-border right-0" />
        <div className="h-px absolute w-[calc(100%+4rem)] bg-border bottom-0 left-1/2 -translate-x-1/2" />
        <div className="h-px absolute w-[calc(100%+4rem)] bg-border top-0 left-1/2 -translate-x-1/2" />
      </div>
    </div>
  );
};
 
export default SpinningCards;