import { motion } from "framer-motion";

interface LogoProps {
  size?: "sm" | "md" | "lg";
  showText?: boolean;
}

export function Logo({ size = "md", showText = true }: LogoProps) {
  const sizes = {
    sm: { container: 24, icon: 18 },
    md: { container: 32, icon: 24 },
    lg: { container: 40, icon: 30 }
  };

  const containerSize = sizes[size].container;
  const iconSize = sizes[size].icon;

  return (
    <div className="flex items-center gap-2">
      <div
        className="relative flex items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-500"
        style={{ width: containerSize, height: containerSize }}
      >
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.3 }}
        >
          {/* Fridge SVG Icon */}
          <svg
            width={iconSize}
            height={iconSize}
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="text-white"
          >
            <rect x="4" y="2" width="16" height="20" rx="2" stroke="currentColor" strokeWidth="2" />
            <line x1="4" y1="10" x2="20" y2="10" stroke="currentColor" strokeWidth="2" />
            <circle cx="7" cy="7" r="1" fill="currentColor" />
            <circle cx="7" cy="14" r="1" fill="currentColor" />
            <line x1="10" y1="6" x2="16" y2="6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
            <line x1="10" y1="14" x2="16" y2="14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
            <line x1="10" y1="17" x2="14" y2="17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          </svg>
        </motion.div>
      </div>

      {showText && (
        <motion.span
          className="text-lg font-bold bg-gradient-to-r from-orange-600 to-amber-600 bg-clip-text text-transparent dark:from-orange-400 dark:to-amber-400"
          initial={{ opacity: 0, x: -5 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.3, delay: 0.1 }}
        >
          Freedge
        </motion.span>
      )}
    </div>
  );
}
