"use client";

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

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

export const HeroArchitecture: React.FC<IllustrationProps> = ({
  className = "",
  delay: _delay = 0,
}) => (
  <svg
    className={className}
    viewBox="0 0 400 300"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <motion.rect
      x="170"
      y="120"
      width="60"
      height="60"
      rx="8"
      className="stroke-slate-900 fill-white"
      strokeWidth="2"
      animate={{ scale: [1, 1.05, 1] }}
      transition={{ duration: 4, repeat: Infinity }}
    />
    {[
      { x: 80, y: 60 },
      { x: 320, y: 60 },
      { x: 80, y: 240 },
      { x: 320, y: 240 },
    ].map((node, i) => (
      <React.Fragment key={i}>
        <motion.path
          d={`M 200 150 L ${node.x} ${node.y}`}
          stroke="currentColor"
          strokeWidth="1"
          className="text-slate-400"
          animate={{ strokeDashoffset: [0, -10] }}
          strokeDasharray="4 4"
          transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
        />
        <motion.circle
          cx={node.x}
          cy={node.y}
          r="12"
          className="fill-white stroke-slate-300"
          strokeWidth="1"
          animate={{ scale: [1, 1.1, 1] }}
          transition={{ duration: 3, repeat: Infinity, delay: i * 0.5 }}
        />
      </React.Fragment>
    ))}
  </svg>
);
