import { useState } from "react";

export const Header = () => {
    const [isMenuOpen, setMenuOpen] = useState(false);

    const toggleMenu = () => setMenuOpen((prev) => !prev);

    return (
        <header className={Styles.wrapper}>
            <div className={Styles.brand}>
                <img src="/logo.webp" alt="Logo Hit Communications" className={Styles.logo} />
                <div>
                    <p className={Styles.title}>Hit Communications</p>
                    <p className={Styles.subtitle}>Servers Manager</p>
                </div>
            </div>

            <div className={Styles.actions}>
                <div className="relative">
                    <button
                        type="button"
                        className={Styles.menuTrigger}
                        aria-haspopup="menu"
                        aria-expanded={isMenuOpen}
                        onClick={toggleMenu}
                    >
                        Opções
                    </button>
                    {isMenuOpen && (
                        <div className={Styles.dropdown} role="menu">
                            <button type="button" className={Styles.dropdownItem}>
                                Adicionar servidor
                            </button>
                            <button type="button" className={Styles.dropdownItem}>
                                Editar perfil
                            </button>
                        </div>
                    )}
                </div>
                <button type="button" className={Styles.logoutButton}>
                    Sair
                </button>
            </div>
        </header>
    );
};

const Styles = {
    wrapper: "flex items-center justify-between rounded-xl border border-cardBorder bg-card px-6 py-4 shadow-sm",
    brand: "flex items-center gap-3",
    logo: "h-10 w-10 object-contain",
    title: "text-base font-semibold text-text",
    subtitle: "text-xs uppercase tracking-wide text-text-secondary",
    actions: "flex items-center gap-3",
    menuTrigger: "rounded-lg border border-cardBorder bg-white/70 px-4 py-2 text-sm font-medium text-text flex items-center gap-2 hover:bg-white transition-colors",
    dropdown: "absolute right-0 mt-2 w-44 rounded-lg border border-cardBorder bg-white py-2 shadow-lg",
    dropdownItem: "w-full px-4 py-2 text-left text-sm text-text-secondary hover:bg-bg hover:text-text transition-colors",
    logoutButton: "rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-hover",
};