"use client";

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

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

export const ConceptMessy: 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.path
      d="M 20 60 C 30 20, 40 100, 50 60 C 60 20, 70 100, 80 60 C 90 20, 100 100, 110 60"
      stroke="currentColor"
      strokeWidth="1"
      className="text-slate-500"
      animate={{ strokeDashoffset: [0, 20] }}
      strokeDasharray="4 4"
      transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
    />
    <motion.path
      d="M 20 40 L 100 80 M 20 80 L 100 40"
      stroke="currentColor"
      strokeWidth="1"
      className="text-slate-200 opacity-50"
      animate={{ opacity: [0.2, 0.5, 0.2] }}
      transition={{ duration: 3, repeat: Infinity }}
    />
  </svg>
);
