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

export const ModalHeader = ({
	label,
	subText,
	closeModal,
	classNames,
}: {
	label: string;
	subText?: string;
	closeModal: () => void;
	classNames?: string;
}) => {
	const style = twMerge(
		"bn-relative bn-flex bn-items-center bn-text-center bn-justify-between bn-border-strong bn-border-0 bn-border-b bn-border-solid bn-flex-shrink-0 bn-px-5 bn-py-4",
		classNames,
	);
	return (
		<div className={style}>
			<div className="bn-flex bn-flex-col bn-items-start">
				<p className="bn-text-base bn-font-medium bn-leading-[20px] bn-text-primary">
					{label}
				</p>
				{subText && <p className="bn-text-secondary bn-text-sm">{subText}</p>}
			</div>
			<ModalCloseBtn
				closeModal={closeModal}
				classNames="bn-text-sm bn-font-medium bn-leading-[18px]"
			/>
		</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>
	);
};
