import { X } from '@phosphor-icons/react';
import { Button, Modal } from '@discord-clone/ui';
import styles from './LogoutConfirmModal.module.css';

interface LogoutConfirmModalProps {
	isOpen: boolean;
	onClose: () => void;
	onConfirm: () => void;
}

/**
 * Friendly confirm dialog shown before we actually wipe the user's
 * session. Uses the shared Modal.Root so the animation + backdrop
 * match the rest of the app; the body / buttons are custom to hit
 * the playful copy from the new UI ("Leaving so soon?" / "Hit 88mph").
 */
export function LogoutConfirmModal({
	isOpen,
	onClose,
	onConfirm,
}: LogoutConfirmModalProps) {
	return (
		<Modal.Root isOpen={isOpen} onClose={onClose} size="small">
			<div className={styles.card}>
				<button
					type="button"
					className={styles.closeButton}
					onClick={onClose}
					aria-label="Close"
				>
					<X size={18} weight="bold" />
				</button>
				<h2 className={styles.title}>Leaving so soon?</h2>
				<p className={styles.body}>Hope to see you back in the future</p>
				<div className={styles.actions}>
					<Button variant="secondary" size="md" onClick={onClose}>
						I changed my mind
					</Button>
					<Button variant="primary" size="md" onClick={onConfirm}>
						Hit 88mph
					</Button>
				</div>
			</div>
		</Modal.Root>
	);
}
