'use client';

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

export const ResponsibilityIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
  <svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* Shield / Responsibility shape */}
    <motion.path
      d="M 60 20 L 90 35 V 65 C 90 85 60 100 60 100 C 60 100 30 85 30 65 V 35 L 60 20 Z"
      stroke="currentColor"
      strokeWidth="1"
      className="text-slate-900"
      initial={{ pathLength: 0, fill: "rgba(15, 23, 42, 0)" }}
      whileInView={{ pathLength: 1, fill: "rgba(15, 23, 42, 0.05)" }}
      viewport={{ once: true }}
      transition={{ duration: 1.5, delay }}
    />
    
    {/* Core point */}
    <motion.circle
      cx="60" cy="55" r="8"
      className="fill-slate-900"
      initial={{ scale: 0 }}
      whileInView={{ scale: 1 }}
      viewport={{ once: true }}
      transition={{ delay: delay + 1, type: "spring" }}
    />
    
    {/* Responsibility lines */}
    {[0, 120, 240].map((angle, i) => {
      const x1 = 60 + Math.cos((angle * Math.PI) / 180) * 12;
      const y1 = 55 + Math.sin((angle * Math.PI) / 180) * 12;
      const x2 = 60 + Math.cos((angle * Math.PI) / 180) * 30;
      const y2 = 55 + Math.sin((angle * Math.PI) / 180) * 30;
      return (
        <motion.line
          key={i}
          x1={x1} y1={y1} x2={x2} y2={y2}
          stroke="currentColor"
          strokeWidth="1"
          className="text-slate-400"
          initial={{ pathLength: 0 }}
          whileInView={{ pathLength: 1 }}
          viewport={{ once: true }}
          transition={{ delay: delay + 1.2 + i * 0.2 }}
        />
      );
    })}
  </svg>
);
