'use client';

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

export const ResultIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* Result Box */}
    <motion.rect
      x="30" y="30" width="60" height="60" rx="4"
      stroke="currentColor"
      strokeWidth="1"
      className="text-slate-900"
      initial={{ pathLength: 0, rotate: -10, opacity: 0 }}
      whileInView={{ pathLength: 1, rotate: 0, opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 1, delay }}
    />
    
    {/* Checkmark */}
    <motion.path
      d="M 45 60 L 55 70 L 75 50"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="text-slate-900"
      initial={{ pathLength: 0 }}
      whileInView={{ pathLength: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: delay + 1 }}
    />
    
    {/* Sparkles */}
    {[
      { x: 25, y: 25 },
      { x: 95, y: 35 },
      { x: 85, y: 95 }
    ].map((pos, i) => (
      <motion.path
        key={i}
        d={`M ${pos.x} ${pos.y-4} V ${pos.y+4} M ${pos.x-4} ${pos.y} H ${pos.x+4}`}
        stroke="currentColor"
        strokeWidth="1"
        className="text-slate-300"
        initial={{ scale: 0, opacity: 0 }}
        whileInView={{ scale: 1, opacity: 1 }}
        viewport={{ once: true }}
        transition={{ delay: delay + 1.5 + i * 0.2, type: "spring" }}
      />
    ))}
  </svg>
);