// ---------------------------------------------------------------------------------------------------------------------
//!                                                      Imports
// ---------------------------------------------------------------------------------------------------------------------

// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import CheckIcon from '@/assets/CheckIcon';
import CloseIcon from '@/assets/CloseIcon';
import './styles.scss';
// ---------------------------------------------------------------------------------------------------------------------

type Props = {
	title: string;
	content: string | JSX.Element;
	message?: string;
	onClose: (ev: React.MouseEvent<HTMLButtonElement>) => void;
	onAccept?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
	onDeny?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
};

const ConfirmPopup = ({
	title,
	content,
	message,
	onClose,
	onAccept,
	onDeny = onClose,
}: Props) => {
	return (
		<div className='popupOverlay'>
			<div
				className='popup'
				onClick={(ev) => ev.stopPropagation()}
			>
				<div className='popupHeader'>
					<p className='popupTitle'>{title}</p>
					<button
						className='popupCloseButton'
						onClick={onClose}
					>
						<CloseIcon />
					</button>
				</div>
				<div className='popupContent'>{message || content}</div>
				<div className='popupButtonsContainer'>
					<button
						type='button'
						className='popupButton'
						onClick={onDeny}
					>
						<CloseIcon />
						Non
					</button>

					<button
						type='button'
						className='popupButton'
						onClick={onAccept}
					>
						<CheckIcon />
						{message ? 'Réessayer' : 'Oui'}
					</button>
				</div>
			</div>
		</div>
	);
};

export default ConfirmPopup;