"use client";
import { useAuthStore } from "@/store/authStore";
import { useRouter } from "next/navigation";
import Navbar from "@/components/Navbar";

export default function DashboardPage() {
  const { user, token, logout, loading } = useAuthStore();
  const router = useRouter();

  if (loading) return <p className="text-center mt-10">Loading...</p>;
  if (!user) {
    router.push("/login");
    return null;
  }

  return (
    <>
      <Navbar />
      <div className="flex flex-col items-center justify-center min-h-screen">
        <h1 className="text-3xl font-bold">Welcome, {user.email}</h1>

        {token ? (
          <div className="mt-4 p-4 bg-gray-100 rounded w-[600px] break-words">
            <p className="text-sm font-mono">{token}</p>
          </div>
        ) : (
          <p className="mt-4 text-gray-500">Fetching token...</p>
        )}

        <button
          onClick={logout}
          className="mt-4 bg-red-500 text-white p-2 rounded"
        >
          Logout
        </button>
      </div>
    </>
  );
}