'use client';

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

export const ConceptPrototyping: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="15" y="25" width="90" height="70" rx="4" stroke="currentColor" strokeWidth="1" className="text-slate-400" />
    <path d="M 15 40 H 105" stroke="currentColor" strokeWidth="1" className="text-slate-300" />
    <motion.rect
      x="25" y="50" width="40" height="8" rx="1"
      className="fill-slate-300"
      animate={{ width: [0, 40, 40, 0] }}
      transition={{ duration: 4, repeat: Infinity, delay }}
    />
    <motion.rect
      x="25" y="65" width="60" height="8" rx="1"
      className="fill-slate-200"
      animate={{ width: [0, 60, 60, 0] }}
      transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
    />
    <motion.circle
      cx="85" cy="75" r="10"
      className="fill-slate-900"
      animate={{ scale: [0.8, 1.1, 0.8] }}
      transition={{ duration: 2, repeat: Infinity }}
    />
  </svg>
);
