import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "@modules/auth";
import { Button } from "@shared/ui";

export function AppHeader(): JSX.Element {
  const auth = useAuth();
  const navigate = useNavigate();

  return (
    <header
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: "1rem 1.5rem",
        borderBottom: "1px solid var(--muted)"
      }}
    >
      <nav style={{ display: "flex", gap: "1rem" }}>
        <a href="/">Home</a>
        {auth.isAuthenticated ? (
          <>
            <Link to="/profile">Profile</Link>
            {auth.user?.role === "admin" ? <Link to="/admin">Admin</Link> : null}
          </>
        ) : (
          <>
            <Link to="/login">Login</Link>
            <Link to="/register">Register</Link>
          </>
        )}
      </nav>
      {auth.isAuthenticated ? (
        <Button
          type="button"
          onClick={() => {
            void auth.logout().then(() => {
              navigate("/login", { replace: true });
            });
          }}
        >
          Logout
        </Button>
      ) : null}
    </header>
  );
}
