'use client';

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

export const ExperienceIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* Timeline line */}
    <motion.path
      d="M 20 100 H 100"
      stroke="currentColor"
      strokeWidth="1"
      className="text-slate-200"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 1.5, delay }}
    />
    
    {/* Experience nodes */}
    {[
      { x: 30, y: 80, label: "Agency" },
      { x: 50, y: 60, label: "Corp" },
      { x: 70, y: 40, label: "Startup" },
      { x: 90, y: 20, label: "Now" }
    ].map((node, i) => (
      <React.Fragment key={i}>
        <motion.circle
          cx={node.x} cy={node.y} r="4"
          className={i === 3 ? "fill-slate-900" : "fill-slate-300"}
          initial={{ scale: 0 }}
          whileInView={{ scale: 1 }}
          viewport={{ once: true }}
          transition={{ delay: delay + 0.5 + i * 0.2, type: "spring" }}
        />
        {i > 0 && (
          <motion.path
            d={`M ${30 + (i-1)*20} ${80 - (i-1)*20} L ${node.x} ${node.y}`}
            stroke="currentColor"
            strokeWidth="1"
            className="text-slate-200"
            initial={{ pathLength: 0 }}
            whileInView={{ pathLength: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: delay + 0.5 + (i-1) * 0.2 }}
          />
        )}
      </React.Fragment>
    ))}
    
    {/* 15+ Years indicator */}
    <motion.text
      x="20" y="115"
      className="text-[8px] font-bold fill-slate-400 uppercase tracking-widest"
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true }}
      transition={{ delay: delay + 1.5 }}
    >
      15+ YEARS
    </motion.text>
  </svg>
);
