import { useDispatch, useSelector } from "react-redux";
import { setApprovalData } from "../../store/approvalSlice";
import type { ReduxStateType } from "../../store/types";
import { ModalCloseBtn } from "../common/ModalHeader";
import { SlideInPanel } from "../common/SlideInPanel";
import { Permit2Approval } from "./Permit2Approval";

export const Approval = () => {
	const dispatch = useDispatch();
	const { isVisible, approvalType } = useSelector(
		(state: ReduxStateType) => state.approval,
	);

	function closePanel() {
		dispatch(setApprovalData({ isVisible: false, data: null }));
	}

	return (
		<SlideInPanel
			isVisible={isVisible}
			closePanel={closePanel}
			cardClasses="bn-px-4 bn-py-[26px] bn-flex bn-flex-col bn-justify-center"
		>
			<ModalCloseBtn
				closeModal={closePanel}
				classNames="bn-absolute bn-right-4 bn-top-4"
			/>

			{approvalType === "permit2" && <Permit2Approval />}
		</SlideInPanel>
	);
};
