import { motion } from "framer-motion";

interface KitchenIllustrationProps {
  height?: number;
}

export function KitchenIllustration({ height = 200 }: KitchenIllustrationProps) {
  // Calculate width based on original ratio (280:200)
  const ratio = 280 / 200;
  const width = height * ratio;

  return (
    <svg
      width={width}
      height={height}
      viewBox="0 0 280 200"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{ maxWidth: '100%' }}
    >
      {/* Pot */}
      <rect x="100" y="120" width="80" height="60" rx="5" fill="#6B7280" />
      <rect x="90" y="110" width="100" height="15" rx="5" fill="#9CA3AF" />

      {/* Pot handles */}
      <rect x="85" y="130" width="10" height="25" rx="5" fill="#9CA3AF" />
      <rect x="185" y="130" width="10" height="25" rx="5" fill="#9CA3AF" />

      {/* Steam animation */}
      <motion.path
        d="M120 100C120 100 115 90 125 85C135 80 130 70 120 70"
        stroke="#E5E7EB"
        strokeWidth="3"
        strokeLinecap="round"
        initial={{ opacity: 0.3 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1.5, repeat: Infinity, repeatType: "reverse" }}
      />

      <motion.path
        d="M140 100C140 100 135 85 145 80C155 75 150 65 140 60"
        stroke="#E5E7EB"
        strokeWidth="3"
        strokeLinecap="round"
        initial={{ opacity: 0.5 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 2, repeat: Infinity, repeatType: "reverse", delay: 0.5 }}
      />

      <motion.path
        d="M160 100C160 100 155 90 165 85C175 80 170 70 160 70"
        stroke="#E5E7EB"
        strokeWidth="3"
        strokeLinecap="round"
        initial={{ opacity: 0.3 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1.8, repeat: Infinity, repeatType: "reverse", delay: 0.3 }}
      />

      {/* Stove */}
      <rect x="70" y="180" width="140" height="10" rx="2" fill="#4B5563" />
      <circle cx="140" cy="185" r="3" fill="#EF4444" />
      <circle cx="120" cy="185" r="3" fill="#EF4444" />
      <circle cx="160" cy="185" r="3" fill="#EF4444" />

      {/* Spoon */}
      <rect x="190" y="100" width="5" height="70" rx="2" fill="#D1D5DB" />
      <ellipse cx="192.5" cy="95" rx="10" ry="5" fill="#D1D5DB" />

      {/* Vegetables */}
      <circle cx="60" cy="150" r="10" fill="#10B981" /> {/* Lettuce */}
      <circle cx="40" cy="160" r="8" fill="#EF4444" /> {/* Tomato */}
      <rect x="210" y="150" width="20" height="8" rx="2" fill="#F59E0B" /> {/* Carrot */}
      <rect x="220" y="140" width="15" height="10" rx="2" fill="#F59E0B" transform="rotate(45 220 140)" /> {/* Carrot top */}
    </svg>
  );
}
