"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" },
  { id: "pairing", label: "iPad nuevo", icon: "🔗", color: "bg-secondary" },
]

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

  return (
    <div className="flex-1 flex flex-col p-4">
      <button
        onClick={() => router.push("/")}
        className="self-start flex items-center gap-2 bg-surface text-foreground border border-border rounded-xl px-4 py-2 text-base font-display font-semibold shadow-sm active:scale-95 transition-transform mb-4"
      >
        <span className="text-xl">←</span>
        <span>Cambiar perfil</span>
      </button>

      <div className="flex-1 flex flex-col items-center justify-center 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>
    </div>
  )
}