"use client"

import { getAuth } from "@/lib/auth-client"
import { useRouter } from "next/navigation"

export default function ConfigPage() {
  const auth = getAuth()
  const { data: session } = auth?.useSession() ?? { data: null }
  const router = useRouter()

  return (
    <div className="min-h-dvh p-6">
      <h1 className="text-2xl font-display font-bold mb-6">Configuración</h1>

      <div className="flex flex-col gap-4 max-w-md">
        <div className="bg-white rounded-2xl p-4 shadow-sm">
          <p className="text-sm text-muted-foreground">Email</p>
          <p className="font-medium">{session?.user?.email || "—"}</p>
        </div>

        <button
          onClick={() => router.push("/parent/auth/pairing")}
          className="bg-secondary text-secondary-foreground touch-target rounded-xl text-lg font-display font-semibold"
        >
          Emparejar nuevo iPad
        </button>

        <button
          onClick={() => router.push("/parent")}
          className="bg-muted text-foreground touch-target rounded-xl font-display"
        >
          Volver al dashboard
        </button>
      </div>
    </div>
  )
}