"use client"

import type { IDeleteFileModalProps } from "./DeleteFileModal.d"
import type { JSX } from "react"

import { FunctionComponent } from "react"

import { Button, Modal } from "@shared/ui"

import styles from "./DeleteFileModal.module.scss"

export const DeleteFileModal: FunctionComponent<IDeleteFileModalProps> = ({
	open,
	onOpenChange,
	fileName,
	onConfirm,
	isPending,
}): JSX.Element => {
	return (
		<Modal
			open={open}
			onOpenChange={onOpenChange}
			title="Удалить файл"
			description="Это действие нельзя отменить"
		>
			<div className={styles.root} data-testid="DeleteFileModal">
				<p className={styles.message}>
					Вы уверены, что хотите удалить файл{" "}
					<span className={styles.fileName}>{fileName}</span>?
				</p>

				<div className={styles.actions}>
					<Button
						type="button"
						variant="outline"
						disabled={isPending}
						onClick={() => onOpenChange?.(false)}
					>
						Отмена
					</Button>
					<Button
						type="button"
						variant="danger"
						disabled={isPending}
						onClick={onConfirm}
					>
						Удалить
					</Button>
				</div>
			</div>
		</Modal>
	)
}