import React, { useState, useEffect } from "react";
import { LogIn, UserPlus, LogOut, Settings } from "lucide-react";
import { Link } from "react-router-dom";
import { useAuth } from "../AuthContext";

function Header() {
  const { token, logout } = useAuth();

  return (
    <header className="bg-white shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div className="flex justify-between items-center">
          <h1 className="text-2xl font-bold text-indigo-600">VigiMétéo</h1>
          <nav>
            <ul className="flex gap-4">
              <li>
                <Link to="/" className="text-gray-600 hover:text-indigo-600">Accueil</Link>
              </li>
              <li>
                <Link to="/about" className="text-gray-600 hover:text-indigo-600">A propos</Link>
              </li>
              <li>
                <Link to="/gestion" className="text-gray-600 hover:text-indigo-600">Gestion</Link>
              </li>
            </ul>
          </nav>
          <div className="flex gap-4">
            {token ? (
              <>
              <Link to="/settings" className="flex items-center gap-2 text-gray-600 hover:text-indigo-600">
              <Settings size={20} />
              <span></span>
            </Link>
              <button
                onClick={logout}
                className="flex items-center gap-2 text-gray-600 hover:text-red-600"
              >
                <LogOut size={20} />
                <span>Déconnexion</span>
              </button>
              </>
            ) : (
              <>
                <Link to="/login" className="flex items-center gap-2 text-gray-600 hover:text-indigo-600">
                  <LogIn size={20} />
                  <span>Connexion</span>
                </Link>
                <Link to="/signup" className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
                  <UserPlus size={20} />
                  <span>Inscription</span>
                </Link>
              </>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}

export default Header;