import React, { FC } from "react";
import { Aligment, Modal, Text } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { DeleteElementFrame } from "../components";

interface IDeleteSpoolInstanceProps {
  handleCancel: () => any;
  handleDelete: (id: string) => void;
  id: string;
  isOpen: boolean;
  name: string;
}

export const DeleteSpoolInstance: FC<IDeleteSpoolInstanceProps> = ({
  handleCancel,
  handleDelete,
  id,
  isOpen,
  name,
}) => {
  return (
    <Modal
      title={t(dictionary.confirmDelete)}
      handleClose={handleCancel}
      handleConfirm={() => handleDelete(id)}
      isOpen={isOpen}
      exitOnEsc={true}
      labels={{
        primary: t(dictionary.delete),
        secondary: t(dictionary.cancel),
      }}
      headerDivader={true}
      primaryVariant="danger"
    >
      <Aligment
        direction="column"
        align="flex-start"
        justify="flex-start"
        gap={16}
      >
        <Text>{t(dictionary.deleteSpoolInstanceHeader)}</Text>
        <DeleteElementFrame>{name}</DeleteElementFrame>
        <Text>{t(dictionary.deleteSpoolInstanceHeader)}</Text>
      </Aligment>
    </Modal>
  );
};