"use client"

import { motion } from "framer-motion"

export interface VocalCardProps {
  letra: string
  fonema: string
  palabra: string
  imageEmoji: string
  color?: string
  onClick: () => void
  disabled?: boolean
}

export default function VocalCard({
  letra,
  fonema,
  palabra,
  imageEmoji,
  color = "#8CB8A0",
  onClick,
  disabled = false,
}: VocalCardProps) {
  return (
    <motion.button
      onClick={onClick}
      disabled={disabled}
      className={`touch-target-lg rounded-3xl flex flex-col items-center justify-center gap-3 p-6 shadow-md ${disabled ? "opacity-40" : ""}`}
      style={{ backgroundColor: color }}
      whileTap={{ scale: 0.92 }}
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
    >
      <span className="text-5xl font-display font-bold text-white drop-shadow-sm">
        {letra.toUpperCase()}
      </span>
      <span className="text-3xl">{imageEmoji}</span>
      <span className="text-white/90 text-lg font-display font-medium">
        {palabra}
      </span>
    </motion.button>
  )
}