/**
 * UploadErrorModal — shown when a background upload (shift-to-instant
 * drop) fails for any reason other than a size limit. Size-limit
 * failures get their own dedicated modal with more explanatory
 * copy; this one is for generic errors like 520 from the homeserver's
 * media CDN, 413, network drops, or auth issues.
 *
 * Only a Cancel (OK) button — retrying a silent background upload
 * doesn't have a great UX. The user can just drag the file again.
 */
import { Modal, Button } from '@brycord/ui';
import { WarningCircle } from '@phosphor-icons/react';
import styles from './FileSizeLimitModal.module.css';

interface UploadErrorModalProps {
	isOpen: boolean;
	onClose: () => void;
	fileName: string;
	message: string;
}

export function UploadErrorModal({ isOpen, onClose, fileName, message }: UploadErrorModalProps) {
	if (!isOpen) return null;

	return (
		<Modal.Root isOpen={isOpen} onClose={onClose} size="small">
			<Modal.Header title="Upload failed" onClose={onClose} />
			<Modal.Content className={styles.content}>
				<div className={styles.iconRow}>
					<div className={styles.iconBadge}>
						<WarningCircle size={28} weight="fill" />
					</div>
				</div>
				<p className={styles.body}>
					Failed to upload <strong>{fileName}</strong>.
				</p>
				<p className={styles.hint}>{message}</p>
			</Modal.Content>
			<Modal.Footer>
				<Button variant="primary" onClick={onClose}>
					OK
				</Button>
			</Modal.Footer>
		</Modal.Root>
	);
}
