"use client"

import { useEffect, useState } from "react"
import GatoMascota from "@/components/child/gato-mascota"
import AudioUnlock from "@/components/child/audio-unlock"

export default function ChildLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const [audioReady, setAudioReady] = useState(false)

  useEffect(() => {
    document.body.style.overscrollBehavior = "none"
  }, [])

  if (!audioReady) {
    return <AudioUnlock onUnlock={() => setAudioReady(true)} />
  }

  return (
    <div className="min-h-dvh bg-background flex flex-col">
      {children}
    </div>
  )
}