"use client";
import { useEffect, useState } from "react";
import styles from "../../styles/dashboard.module.css";
import AuthGuard from "../../components/AuthGuard";

interface AccountData {
  id: number;
  login: string;
  name: string | null;
  email: string | null;
  balance: number;
}

export default function AccountPage() {
//   const [account, setAccount] = useState<AccountData | null>(null);
//   const [loading, setLoading] = useState(true);
//   const [error, setError] = useState<string | null>(null);

//   useEffect(() => {
//     fetch("/api/account")
//       .then((res) => {
//         if (!res.ok) throw new Error("Ошибка загрузки данных аккаунта");
//         return res.json();
//       })
//       .then((data) => {
//         setAccount(data);
//         setLoading(false);
//       })
//       .catch((err) => {
//         setError(err.message);
//         setLoading(false);
//       });
//   }, []);

//   if (loading) return <div className={styles.dashboard}>Загрузка...</div>;
//   if (error) return <div className={styles.dashboard}>Ошибка: {error}</div>;
//   if (!account) return <div className={styles.dashboard}>Нет данных</div>;

  return (
    <AuthGuard>
      <div className={styles.dashboard}>
        <h1 className={styles.title}>Аккаунт</h1>
        <div className={styles.card} style={{ maxWidth: 400, margin: "0 auto" }}>
          {/* <div><b>ID:</b> {account.id}</div>
          <div><b>Логин:</b> {account.login}</div>
          <div><b>Имя:</b> {account.name || "-"}</div>
          <div><b>Email:</b> {account.email || "-"}</div>
          <div><b>Баланс:</b> {account.balance.toLocaleString("ru-RU", { style: "currency", currency: "RUB" })}</div> */}
        </div>
      </div>
    </AuthGuard>
  );
}