import { Button } from "antd";
import AuthModal, { authModalAtom, authStateAtom } from "@/components/auth-modal";
import { useAtomValue, useSetAtom } from "jotai";
import { UserOutlined } from "@ant-design/icons";

const Header = () => {
  const authState = useAtomValue(authStateAtom);
  const setModalOpen = useSetAtom(authModalAtom);
  const isSignedIn = authState === "SIGNED_IN";

  return (
    <>
      <header className="flex justify-between items-center mx-auto py-2">
        <div />
        {isSignedIn ? (
          <UserOutlined className="h-[32px] text-xl" />
        ) : (
          <Button onClick={() => setModalOpen(true)}>Open Auth</Button>
        )}
      </header>
      <AuthModal />
    </>
  );
};

export default Header;