import Link from "next/link";
import { ArrowRightFromLine, CircleQuestionMark, List, Plus, UserRound, UserRoundMinus } from "lucide-react";
import { getAuth } from "@/lib/auth";
import HeaderButton from "./HeaderButton";
import { logOut } from "@/app/actions";

export default async function Header({ showToolbar = false }: { showToolbar?: boolean }) {
  const auth = await getAuth();

  return (
    <header className="flex items-center gap-6 m-4">
      <Link href={auth ? "/notes" : "/"}>
        <HeaderButton title="rhyme" className="bg-sky-600 hover:bg-sky-500" />
      </Link>
      
      <div className="flex gap-2">
        {auth && (
          <>
            <HeaderButton title="new" icon={<Plus size={20} />} />
            {showToolbar && <HeaderButton title="list" icon={<List size={20} />} />}
          </>
        )}
        {showToolbar && <HeaderButton title="export" icon={<ArrowRightFromLine size={20} />} />}
      </div>

      <div className="flex gap-2 ml-auto">
        <Link href="/about">
          <HeaderButton title="about" icon={<CircleQuestionMark size={20} />} />
        </Link>
        {auth ? (
          <HeaderButton onClick={logOut} title="log out" icon={<UserRoundMinus size={20} />} />
        ) : (
          <Link href="/auth">
            <HeaderButton title="login" icon={<UserRound size={20} />} />
          </Link>
        )}
      </div>
    </header>
  );
}