import { Bell, LogOut, UserCircle2 } from "lucide-react";
import { useAuth } from "../app/AuthContext";

export default function Header() {
  const { user, logout } = useAuth();
  const displayName = user?.firstName || user?.username || "Benutzer";

  return (
    <header className="header">

      <div className="header-left">

        <h1>Guten Morgen {displayName} ☀️</h1>

        <p>
          Schön, dass ihr heute wieder da seid.
        </p>

      </div>

      <div className="header-right">

        <button className="icon-button notification">

          <Bell size={20} />

          <span className="notification-dot">
            3
          </span>

        </button>

        <button className="icon-button">
          <UserCircle2 size={24} />
        </button>

        {user?.username && (
          <span className="header-username">{user.username}</span>
        )}

        <button className="icon-button" title="Abmelden" onClick={logout}>
          <LogOut size={20} />
        </button>

      </div>

    </header>
  );
}