import { AccountDialog } from "@/components/account-dialog";
import { ThemeBtnSelector } from "@/components/theme-btn-selector";
import Image from "next/image";
import type React from "react";
import Link from "next/link";

export function Header({
	title,
	children,
}: { title?: string; children?: React.ReactNode }) {
	return (
		<header
			className={
				"flex flex-col md:flex-row justify-between items-center w-full p-1 md:px-3 md:py-2 pb-2 border-b-2"
			}
		>
			<Link href={"/"} className={"flex flex-row justify-center md:justify-start items-center w-fit gap-2"}>
				<Image src={"neptune.svg"} alt={"Logo of Neptune"} width={42} height={42} />
				<h1 className={"font-bold text-xl align-middle text-center text-wrap"}>
					{title || "Neptune"}
				</h1>
			</Link>
			<div
				className={"flex flex-col md:flex-row w-fit justify-center items-center"}
			>
				{children}
			</div>
			<div
				className={
					"w-1/3 flex flex-row justify-center md:justify-end md:w-fit gap-2 items-center"
				}
			>
				<AccountDialog />
				<ThemeBtnSelector />
			</div>
		</header>
	);
}