import { useAuth } from "../providers/AuthProvider";
import { useNavigate } from "react-router-dom";

export default function Header() {
  const auth = useAuth();
  const navigate = useNavigate();

  return (
    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-4">
      <a href="#" onClick={() => navigate("/")}>
        <h1 className="font-bold">
          Alex <span className="font-normal text-blue-500">/</span> dev + QA
        </h1>
      </a>
      <div className="flex gap-3 text-sm sm:text-base">
        {auth.user !== null ? (
          <a href="#" onClick={() => auth.logout()}>
            Log Out
          </a>
        ) : (
          <a href="/login">Log In</a>
        )}
        <a
          href="https://github.com/azpha"
          target="_blank"
          className="hover:underline"
        >
          GitHub
        </a>
        <a
          href="#"
          className="hover:underline"
          onClick={() => navigator.clipboard.writeText("alex@alexav.gg")}
        >
          alex@alexav.gg
        </a>
      </div>
    </div>
  );
}