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


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 border-b-2"}>
			<div className={"flex flex-row justify-center md:justify-start items-center gap-2 md:w-1/3"}>
				<Image src={'yellow-bit.svg'} alt={'Logo of YeloBit'} width={42} height={42}/>
				<h1 className={"font-bold text-xl align-middle text-center text-wrap"}>{title || 'YeloBit'}</h1>
			</div>
			<div className={"w-1/3 flex flex-row justify-center items-center"}>
				{children}
			</div>
			<div className={"w-1/3 flex flex-row justify-end gap-2 items-center"}>
				<AccountDialog/>
				<ThemeBtnSelector/>
			</div>
		</header>
	)
}