import React, { useState, useEffect } from 'react';
import { useAuth } from '../context/AuthContext';
import './HomePage.css';

const HomePage = () => {
  const { user } = useAuth();
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (user) {
      // Simuler le chargement des données utilisateur
      setTimeout(() => {
        setUserData(user);
        setLoading(false);
      }, 500);
    }
  }, [user]);

  if (loading) {
    return (
      <div className="loading">
        <div className="spinner"></div>
      </div>
    );
  }

  return (
    <div className="home-container">
      <div className="profile-card">
        <h2>Profil Utilisateur</h2>
        {userData && (
          <div className="user-info">
            <div className="info-item">
              <strong>Nom d'utilisateur:</strong>
              <span>{userData.username}</span>
            </div>
            <div className="info-item">
              <strong>Admin:</strong>
              <span>{userData.is_admin ? 'Oui' : 'Non'}</span>
            </div>
            <div className="info-item">
              <strong>Date d'inscription:</strong>
              <span>{new Date(user.date_joined).toLocaleDateString('fr-FR') || 'Non spécifié'}</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default HomePage;