"use client";

import { useEffect, type ReactNode } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/context/AuthContext";

export function AccountSection({
  title,
  children,
  wide,
}: {
  title: string;
  children: ReactNode;
  wide?: boolean;
}) {
  const { customer, loading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!loading && !customer) router.replace("/account");
  }, [loading, customer, router]);

  if (loading || !customer) {
    return (
      <div className="ot-container py-20 text-center text-ot-muted">
        Cargando…
      </div>
    );
  }

  return (
    <div
      className={`ot-container py-12 ${wide ? "max-w-2xl" : "max-w-xl"}`}
    >
      <p className="ot-eyebrow">Cuenta</p>
      <h1 className="font-serif text-4xl mt-2">{title}</h1>
      <div className="mt-6 text-sm leading-relaxed text-ot-ink/80">{children}</div>
    </div>
  );
}