"use client"

import { useRouter } from "next/navigation"
import { GatoMascota } from "@/components/child/gato-mascota"

const activities = [
  { id: "lectura", label: "Letras", icon: "Aa", color: "bg-primary" },
  { id: "numeros", label: "Números", icon: "123", color: "bg-accent" },
  { id: "logros", label: "Mis logros", icon: "⭐", color: "bg-warning" },
]

export default function ChildHome() {
  const router = useRouter()

  return (
    <div className="flex-1 flex flex-col items-center justify-center p-6 gap-8">
      <GatoMascota mood="happy" message="¡Hola! ¿Qué querés aprender hoy?" />

      <div className="flex flex-col gap-4 w-full max-w-md">
        {activities.map((a) => (
          <button
            key={a.id}
            onClick={() => router.push(`/child/${a.id}`)}
            className={`${a.color} text-primary-foreground touch-target-lg rounded-2xl flex items-center gap-4 px-6 py-5 text-xl font-display font-semibold shadow-md active:scale-95 transition-transform`}
          >
            <span className="text-2xl">{a.icon}</span>
            <span>{a.label}</span>
          </button>
        ))}
      </div>
    </div>
  )
}