import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Dialog from '@material-hu/components/design-system/Dialog';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { type DeleteConfirmDialogProps } from './types';
import { useDeleteConfirmDialogCase } from './useDeleteConfirmDialogCase';

const DeleteConfirmDialog = (props: DeleteConfirmDialogProps) => {
  const { t } = useLokaliseTranslation('general');
  const { onClose } = props;
  const { title, body, isLoading, onConfirm } =
    useDeleteConfirmDialogCase(props);

  return (
    <Dialog
      onClose={onClose}
      title={title}
      body={
        <Stack sx={{ minWidth: 492 }}>
          <Typography variant="globalS">{body}</Typography>
        </Stack>
      }
      primaryButtonProps={{
        children: t('general:delete'),
        onClick: onConfirm,
        loading: isLoading,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: onClose,
      }}
    />
  );
};

export default DeleteConfirmDialog;