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

export default async function Header() {
  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>
      
      {auth && (
        <div className="flex gap-2">
            <Link href="/notes/new">
              <HeaderButton title="new" icon={<Plus size={20} />} />
            </Link>
            <Link href="/notes">
              <HeaderButton title="list" icon={<List size={20} />} />
            </Link>
        </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>
  );
}