import Button from "$/component/button/Button";
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({
	onClose,
	className,
	children,
	...props
}: Readonly<ModalHeaderProps>){
	return (
		<div
			className={clsx(
				"flex flex-row items-center justify-center w-full rounded-t-lg",
				className
			)}
			{...props}
		>
			<DialogTitle
				as="div"
				className="flex flex-row items-center justify-center mx-8 my-3"
			>
				{children}
			</DialogTitle>
			{
				onClose &&
				<Button
					className="absolute top-1 right-1 cursor-pointer"
					onClick={onClose}
					size="sm"
					variant="icon"
				>
					<BsXLg
						size={20}
					/>
				</Button>
			}
		</div>
	);
}