"use client";

/* eslint-disable no-unused-vars */

import * as React from "react";
import { motion } from "framer-motion";
import { IllustrationProps } from "./types";

export const ConceptSystem: React.FC<IllustrationProps> = ({
  className = "",
  delay: _delay = 0,
}) => (
  <svg
    className={className}
    viewBox="0 0 120 120"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <motion.circle
      cx="60"
      cy="60"
      r="15"
      className="fill-slate-900"
      animate={{ scale: [1, 1.1, 1] }}
      transition={{ duration: 4, repeat: Infinity }}
    />
    {[0, 72, 144, 216, 288].map((angle, i) => {
      const x = 60 + Math.cos((angle * Math.PI) / 180) * 40;
      const y = 60 + Math.sin((angle * Math.PI) / 180) * 40;
      return (
        <React.Fragment key={i}>
          <motion.line
            x1="60"
            y1="60"
            x2={x}
            y2={y}
            stroke="currentColor"
            strokeWidth="1"
            className="text-slate-400"
            animate={{ strokeDashoffset: [0, 10] }}
            strokeDasharray="2 2"
            transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
          />
          <motion.circle
            cx={x}
            cy={y}
            r="6"
            className="fill-white stroke-slate-300"
            animate={{ scale: [1, 1.2, 1] }}
            transition={{ duration: 3, repeat: Infinity, delay: i * 0.4 }}
          />
        </React.Fragment>
      );
    })}
  </svg>
);