"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { GatoMascota } from "./gato-mascota"

interface AudioUnlockProps {
  onUnlock: () => void
}

export default function AudioUnlock({ onUnlock }: AudioUnlockProps) {
  const [pressed, setPressed] = useState(false)

  const handleUnlock = () => {
    if (typeof window !== "undefined") {
      const AudioCtx = window.AudioContext || (window as any).webkitAudioContext
      if (AudioCtx) {
        const ctx = new AudioCtx()
        ctx.resume().then(() => {
          ctx.close()
        })
      }
    }
    setPressed(true)
    setTimeout(onUnlock, 600)
  }

  return (
    <div className="min-h-dvh bg-background flex flex-col items-center justify-center p-8 gap-8">
      <GatoMascota mood="happy" message="¡Hola! Tocá la pantalla para empezar" size="lg" />

      <motion.button
        onClick={handleUnlock}
        disabled={pressed}
        className="bg-primary text-primary-foreground touch-target-lg rounded-full text-2xl px-12 py-6 font-display font-bold shadow-lg"
        whileTap={{ scale: 0.95 }}
        animate={pressed ? { scale: 1.1, opacity: 0 } : {}}
      >
        {pressed ? "¡Empezamos!" : "TOCÁ ACÁ"}
      </motion.button>
    </div>
  )
}