/**
 * Delete Post Type Modal.
 *
 * Confirmation modal shown when user unchecks a content type that has
 * indexed records in Sideconvo. Uses the ModalLayout design system component.
 *
 * @package Sideconvo
 */

import { ModalLayout } from '../ui';
import styles from './DeletePostTypeModal.module.scss';

interface DeletePostTypeModalProps {
	isOpen: boolean;
	postTypeLabel: string;
	indexedCount: number;
	onDelete: () => void;
	onKeep: () => void;
	onDismiss: () => void;
}

export default function DeletePostTypeModal( {
	isOpen,
	postTypeLabel,
	indexedCount,
	onDelete,
	onKeep,
	onDismiss,
}: DeletePostTypeModalProps ) {
	return (
		<ModalLayout
			isOpen={ isOpen }
			title="Remove content from Sideconvo?"
			primaryActionText="Delete from Sideconvo"
			secondaryActionText="Keep indexed content"
			primaryActionVariant="danger"
			onPrimaryAction={ onDelete }
			onSecondaryAction={ onKeep }
			onDismiss={ onDismiss }
			width={ 480 }
		>
			<div className={ styles.body }>
				<p>
					Unchecking <strong>{ postTypeLabel }</strong> will stop syncing it.
					Do you also want to delete all{ ' ' }
					<strong>{ indexedCount.toLocaleString() }</strong> indexed items for
					this type from Sideconvo?
				</p>
			</div>
		</ModalLayout>
	);
}