'use client';

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

export const ConceptCode: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    {[40, 55, 70, 85].map((y, i) => (
      <motion.path
        key={y}
        d={`M 25 ${y} H ${25 + ((i * 17) % 50) + 20}`}
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        className="text-slate-400"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: [0, 1, 1, 0] }}
        transition={{ duration: 4, repeat: Infinity, delay: i * 0.2 + delay }}
      />
    ))}
    <motion.path
      d="M 90 40 L 100 50 L 115 30"
      stroke="currentColor"
      strokeWidth="3"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="text-slate-900"
      animate={{ opacity: [0, 1, 1, 0], scale: [0.8, 1, 1, 0.8] }}
      transition={{ duration: 4, repeat: Infinity, delay: 1.5 }}
    />
  </svg>
);
