'use client'

export function ProjectIllustration({ slug, size = 100 }: { slug: string; size?: number }) {
  const illustrations: Record<string, React.ReactNode> = {
    zauberstab: (
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
        <rect x="20" y="80" width="60" height="4" rx="2" fill="#D4915C" transform="rotate(-45 50 50)" />
        <circle cx="28" cy="28" r="4" fill="#F5A623" opacity="0.6" />
        <circle cx="22" cy="35" r="2.5" fill="#FFC107" opacity="0.5" />
        <circle cx="35" cy="22" r="2" fill="#FFC107" opacity="0.4" />
        <path d="M25 25 L20 18 M25 25 L32 20 M25 25 L22 32" stroke="#F5A623" strokeWidth="1.5" strokeLinecap="round" />
        <circle cx="26" cy="26" r="6" fill="none" stroke="#F5A623" strokeWidth="0.5" opacity="0.3" />
      </svg>
    ),
    untersetzer: (
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
        <ellipse cx="50" cy="55" rx="32" ry="8" fill="#C4814C" />
        <ellipse cx="50" cy="50" rx="32" ry="8" fill="#E8A96C" />
        <ellipse cx="50" cy="50" rx="22" ry="5" fill="none" stroke="#D4915C" strokeWidth="0.8" />
        <ellipse cx="50" cy="50" rx="12" ry="2.8" fill="none" stroke="#D4915C" strokeWidth="0.6" />
        <circle cx="42" cy="48" r="3" fill="#FF6B6B" opacity="0.5" />
        <circle cx="55" cy="46" r="2" fill="#4CAF50" opacity="0.5" />
        <circle cx="48" cy="53" r="2.5" fill="#2196F3" opacity="0.4" />
      </svg>
    ),
    nagelbilder: (
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
        <rect x="20" y="20" width="60" height="60" rx="4" fill="#E8A96C" />
        {/* Nails forming a star */}
        <circle cx="50" cy="30" r="2" fill="#888" />
        <circle cx="35" cy="45" r="2" fill="#888" />
        <circle cx="65" cy="45" r="2" fill="#888" />
        <circle cx="40" cy="65" r="2" fill="#888" />
        <circle cx="60" cy="65" r="2" fill="#888" />
        {/* String */}
        <path d="M50 30 L35 45 L60 65 L40 65 L65 45 Z" stroke="#FF6B6B" strokeWidth="1.5" fill="none" />
        <path d="M50 30 L40 65 M50 30 L60 65 M35 45 L65 45" stroke="#4CAF50" strokeWidth="1" fill="none" opacity="0.6" />
      </svg>
    ),
    bleistiftbox: (
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
        <path d="M25 75 L25 35 L75 35 L75 75 Z" fill="#E8A96C" />
        <path d="M25 35 L30 30 L80 30 L75 35 Z" fill="#D4915C" />
        <path d="M75 35 L80 30 L80 70 L75 75 Z" fill="#C4814C" />
        {/* Pencils */}
        <rect x="35" y="20" width="4" height="30" rx="1" fill="#FFC107" />
        <polygon points="35,50 39,50 37,55" fill="#2C2C2C" />
        <rect x="45" y="15" width="4" height="32" rx="1" fill="#2196F3" />
        <polygon points="45,47 49,47 47,52" fill="#2C2C2C" />
        <rect x="55" y="22" width="4" height="28" rx="1" fill="#FF6B6B" />
        <polygon points="55,50 59,50 57,55" fill="#2C2C2C" />
      </svg>
    ),
    segelboot: (
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
        <path d="M20 65 Q50 55 80 65 Q50 72 20 65Z" fill="#E8A96C" />
        <line x1="50" y1="25" x2="50" y2="62" stroke="#8B6F47" strokeWidth="2.5" />
        <path d="M50 25 L70 50 L50 58Z" fill="white" stroke="#ddd" strokeWidth="0.5" />
        <path d="M50 30 L38 52 L50 58Z" fill="#FF6B6B" opacity="0.8" />
        {/* Water */}
        <path d="M10 72 Q25 68 40 72 Q55 76 70 72 Q85 68 100 72" stroke="#2196F3" strokeWidth="1.5" fill="none" opacity="0.4" />
        <path d="M5 78 Q20 74 35 78 Q50 82 65 78 Q80 74 95 78" stroke="#2196F3" strokeWidth="1" fill="none" opacity="0.3" />
      </svg>
    ),
    vogelhaus: (
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
        {/* Roof */}
        <path d="M25 45 L50 25 L75 45 Z" fill="#C4814C" />
        {/* Body */}
        <rect x="30" y="45" width="40" height="35" fill="#E8A96C" />
        {/* Entrance hole */}
        <circle cx="50" cy="58" r="6" fill="#5D4037" />
        {/* Perch */}
        <rect x="47" y="65" width="6" height="2" rx="1" fill="#8B6F47" />
        <rect x="48" y="67" width="4" height="6" rx="1" fill="#8B6F47" />
        {/* Post */}
        <rect x="46" y="80" width="8" height="15" rx="1" fill="#8B6F47" />
        {/* Bird */}
        <ellipse cx="68" cy="40" rx="5" ry="4" fill="#FF6B6B" />
        <circle cx="71" cy="38" r="1.5" fill="#2C2C2C" />
        <path d="M73 39 L77 38.5" stroke="#F5A623" strokeWidth="1.5" strokeLinecap="round" />
      </svg>
    ),
    'holztier-igel': (
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
        {/* Body */}
        <ellipse cx="50" cy="60" rx="25" ry="18" fill="#C4814C" />
        {/* Head */}
        <ellipse cx="28" cy="58" rx="10" ry="9" fill="#D4915C" />
        {/* Nose */}
        <circle cx="20" cy="57" r="2" fill="#2C2C2C" />
        {/* Eye */}
        <circle cx="25" cy="54" r="1.5" fill="#2C2C2C" />
        <circle cx="25.5" cy="53.5" r="0.5" fill="white" />
        {/* Spines */}
        {[0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150].map((angle, i) => {
          const rad = (angle - 30) * Math.PI / 180
          const x1 = 55 + Math.cos(rad) * 20
          const y1 = 52 + Math.sin(rad) * 14
          const x2 = 55 + Math.cos(rad) * 30
          const y2 = 52 + Math.sin(rad) * 22
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#8B6F47" strokeWidth="2" strokeLinecap="round" />
        })}
        {/* Feet */}
        <ellipse cx="35" cy="75" rx="4" ry="2" fill="#D4915C" />
        <ellipse cx="60" cy="75" rx="4" ry="2" fill="#D4915C" />
      </svg>
    ),
    'schnitzfigur-pilz': (
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
        {/* Stem */}
        <path d="M40 55 Q38 75 42 85 L58 85 Q62 75 60 55 Z" fill="#F5F5DC" />
        <ellipse cx="50" cy="85" rx="10" ry="3" fill="#E8E0C8" />
        {/* Cap */}
        <ellipse cx="50" cy="48" rx="28" ry="18" fill="#D32F2F" />
        <ellipse cx="50" cy="55" rx="22" ry="5" fill="#E8A96C" />
        {/* White dots */}
        <circle cx="38" cy="40" r="3" fill="white" opacity="0.9" />
        <circle cx="55" cy="35" r="2.5" fill="white" opacity="0.9" />
        <circle cx="48" cy="45" r="2" fill="white" opacity="0.8" />
        <circle cx="62" cy="42" r="2.5" fill="white" opacity="0.85" />
        <circle cx="42" cy="50" r="1.8" fill="white" opacity="0.7" />
        {/* Grass */}
        <path d="M30 85 Q32 78 34 85" stroke="#4CAF50" strokeWidth="1.5" fill="none" />
        <path d="M65 85 Q67 79 69 85" stroke="#4CAF50" strokeWidth="1.5" fill="none" />
        <path d="M72 85 Q73 80 75 85" stroke="#4CAF50" strokeWidth="1" fill="none" opacity="0.6" />
      </svg>
    ),
  }

  return <>{illustrations[slug] || illustrations.zauberstab}</>
}