// IconCircle.tsx
"use client";
import React from "react";
import { motion } from "framer-motion";
import "./IconCircle.css";
import red from "@/assets/pngs/1.png";
import equipos from "@/assets/pngs/2.png";
import correo from "@/assets/pngs/3.png";
import desarrolla from "@/assets/pngs/4.png";
import cedetec from "@/assets/pngs/5.png";
import Image from "next/image";

const iconImages = [red, equipos, correo, desarrolla, cedetec];

const iconClasses = [
  "bi bi-graph-up",
  "bi bi-lightning-fill",
  "bi bi-currency-exchange",
  "bi bi-globe2",
  "bi bi-bar-chart-line-fill",
  "bi bi-arrow-left-right",
  "bi bi-bank",
  "bi bi-boxes",
];

interface IconCircleProps {
  delay?: number;
}

const IconCircle: React.FC<IconCircleProps> = ({ delay = 0 }) => {
  return (
    <div className="icon-circle">
      {/* Icono central fijo */}
      <motion.div
        className="central-icon"
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ duration: 1, delay }}
      >
        <i className="bi bi-stars"></i>
      </motion.div>

      {/* Contenedor que orbita con los iconos flotantes */}
      <motion.div
        className="orbiting-container"
        animate={{ rotate: 360 }}
        transition={{
          duration: 30,
          repeat: Infinity,
          ease: "linear",
        }}
      >
        {iconImages.map((iconClass, i) => {
          const angle = i * 70 * (Math.PI / 180); // Convertir a radianes
          const radius = 130;
          const x = Math.cos(angle) * radius;
          const y = Math.sin(angle) * radius;

          return (
            <motion.div
              key={i}
              className="floating-icon"
              style={{
                left: x,
                top: y,
              }}
              initial={{
                scale: 0,
                opacity: 0,
              }}
              animate={{
                scale: 1,
                opacity: 1,
              }}
              transition={{
                delay: delay + 0.5 + i * 0.1,
                duration: 0.5,
                type: "spring",
              }}
            >
              <motion.div
                animate={{
                  rotate: 360,
                }}
                transition={{
                  duration: 20 + i * 2,
                  repeat: Infinity,
                  ease: "linear",
                }}
              >
                <Image
                  src={iconClass}
                  alt={`Icon ${i + 1}`}
                  width={64}
                  height={64}
                />
              </motion.div>
            </motion.div>
          );
        })}
      </motion.div>
    </div>
  );
};

export default IconCircle;