'use client';

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

export const ConceptCommunication: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="20" cy="60" r="6" className="fill-slate-200 stroke-slate-300" strokeWidth="1" />
    <circle cx="100" cy="60" r="6" className="fill-slate-900" />
    <path d="M 26 60 H 94" stroke="currentColor" strokeWidth="1" className="text-slate-300" strokeDasharray="4 4" />
    <motion.path
      d="M 26 60 H 94"
      stroke="currentColor"
      strokeWidth="2"
      className="text-slate-400"
      initial={{ pathLength: 0 }}
      animate={{ pathLength: [0, 1, 1, 0], opacity: [0, 1, 1, 0] }}
      transition={{ duration: 3, repeat: Infinity, ease: "easeInOut", delay }}
    />
    <motion.circle r="3" className="fill-slate-900">
      <animateMotion
        dur="3s"
        repeatCount="indefinite"
        path="M 26 60 H 94"
      />
    </motion.circle>
  </svg>
);
