import React from "react";
import { twMerge } from "../../utils/tailwindMerge";
import { MIcon } from "./MIcon";

export const ModalHeader = ({
	label,
	closeModal,
}: { label: string; closeModal: () => void }) => {
	return (
		<div className="bn-relative bn-h-[60px] bn-flex bn-items-center bn-text-center bn-justify-center bn-border-primary bn-border-0 bn-border-b bn-border-solid bn-flex-shrink-0">
			<span className="bn-text-lg bn-font-medium bn-leading-[18px] bn-text-primary">
				{label}
			</span>
			<ModalCloseBtn
				closeModal={closeModal}
				classNames="bn-absolute bn-top-0 bn-bottom-0 bn-my-auto bn-right-4"
			/>
		</div>
	);
};

export const ModalCloseBtn = ({
	closeModal,
	classNames,
}: { closeModal: () => void; classNames?: string }) => {
	const style = twMerge(
		"bn-h-8 bn-w-8 bn-bg-transparent bn-flex bn-items-center bn-justify-center bn-border-none bn-cursor-pointer bn-text-primary",
		classNames,
	);
	return (
		<button type="button" onClick={closeModal} className={style}>
			<MIcon name="close" />
		</button>
	);
};
