"use client"

import { motion } from "framer-motion"

interface GatoMascotaProps {
  mood?: "happy" | "thinking" | "celebrate" | "coach"
  message?: string
  size?: "sm" | "md" | "lg"
}

const moods = {
  happy: {
    emoji: "😺",
    animation: { y: [0, -5, 0] },
    transition: { repeat: Infinity, duration: 2 },
  },
  thinking: {
    emoji: "🤔",
    animation: { rotate: [0, -10, 10, 0] },
    transition: { repeat: Infinity, duration: 1.5 },
  },
  celebrate: {
    emoji: "🎉",
    animation: { scale: [1, 1.2, 1] },
    transition: { repeat: Infinity, duration: 0.8 },
  },
  coach: {
    emoji: "🐱",
    animation: { y: 0 },
    transition: { duration: 0 },
  },
}

export function GatoMascota({ mood = "happy", message, size = "md" }: GatoMascotaProps) {
  const config = moods[mood]
  const sizeClass = size === "sm" ? "text-3xl" : size === "lg" ? "text-7xl" : "text-5xl"

  return (
    <div className="flex flex-col items-center gap-2">
      <motion.span
        className={`${sizeClass} block select-none`}
        animate={config.animation}
        transition={config.transition}
      >
        {config.emoji}
      </motion.span>
      {message && (
        <p className="text-foreground/80 text-lg font-display font-medium text-center max-w-xs">
          {message}
        </p>
      )}
    </div>
  )
}

export default GatoMascota