import { Card, Modal } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import type React from 'react';
import { cardClasses, modalClasses } from 'styles';

function AddItemModal({
	modalOpened,
	handleClose,
	body,
	title,
}: {
	modalOpened: boolean;
	handleClose: () => void;
	body: React.ReactNode;
	title: string;
}) {
	const { isMobile } = useCommonHooks();
	return (
		<Modal.Root
			size={'60%'}
			className={modalClasses.helpModal}
			classNames={modalClasses}
			opened={modalOpened}
			fullScreen={isMobile}
			onClose={handleClose}
			closeOnEscape
			closeOnClickOutside
			centered
		>
			<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
			<Modal.Content style={{ zIndex: 1000 }}>
				<Modal.Header>
					<Modal.Title>{title}</Modal.Title>
					<Modal.CloseButton />
				</Modal.Header>
				<Modal.Body
					h={isMobile ? '90%' : undefined}
					style={{
						justifyContent: 'center',
						alignContent: 'center',
						paddingBottom: '2rem',
					}}
				>
					<Card
						style={{ alignContent: 'center', justifyContent: 'center' }}
						className={cardClasses.settingsItem}
						classNames={cardClasses}
					>
						{body}
					</Card>
				</Modal.Body>
			</Modal.Content>
		</Modal.Root>
	);
}

export default AddItemModal;