import type { ModalHeaderProps } from "$/types/ModalTypes";
import { DialogTitle } from "@headlessui/react";
import clsx from "clsx";
import { BsXLg } from "react-icons/bs";


export default function ModalHeader(props: ModalHeaderProps){
	const {
		onClose,
		className,
		children
	} = props;


	return (
		<div
			className={clsx(
				"flex flex-row items-center justify-center w-full rounded-t-lg",
				className
			)}
		>
			<DialogTitle
				as="div"
				className="flex flex-row items-center justify-center mx-8 my-3"
			>
				{children}
			</DialogTitle>
			{
				onClose &&
				<div
					className="absolute top-1 right-1 cursor-pointer"
					onClick={onClose}
				>
					<BsXLg
						size={20}
					/>
				</div>
			}
		</div>
	);
}