"use client";

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

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

export const ConceptAutomation: 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.g
      animate={{ rotate: 360 }}
      transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
      style={{ originX: "40px", originY: "60px" }}
    >
      <path d="M 40 45 L 50 60 L 40 75 L 30 60 Z" className="fill-slate-300" />
    </motion.g>
    <motion.g
      animate={{ rotate: -360 }}
      transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
      style={{ originX: "75px", originY: "65px" }}
    >
      <path d="M 75 50 L 85 65 L 75 80 L 65 65 Z" className="fill-slate-500" />
    </motion.g>
    <motion.path
      d="M 10 60 H 110"
      stroke="currentColor"
      strokeWidth="1"
      className="text-slate-300"
      strokeDasharray="4 4"
      animate={{ strokeDashoffset: [0, -20] }}
      transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
    />
  </svg>
);
