import { SlideInPanel } from "@components/common/SlideInPanel";
import { toggleCompareModal } from "@store/globalSlice";
import type { ReduxStateType } from "@store/types";
import { useDispatch, useSelector } from "react-redux";
import { CompareCard } from "./CompareCard";

export const CompareModal = () => {
	const dispatch = useDispatch();
	const showCompareModal = useSelector(
		(state: ReduxStateType) => state.global.showCompareModal,
	);

	function closeModal() {
		dispatch(toggleCompareModal(false));
	}
	return (
		<SlideInPanel closePanel={closeModal} isVisible={showCompareModal}>
			<CompareCard closePanel={closeModal} />
		</SlideInPanel>
	);
};
