import Button from '@/@core/components/mui/Button'
import DialogCloseButton from '@/components/DialogCloseButton'
import { Dialog, DialogActions, DialogTitle } from '@mui/material'
import { useTranslations } from 'next-intl'

const DeleteDialog = ({
  open,
  setOpen,
  onClick,
  isPending
}: {
  open: boolean
  setOpen: (open: boolean) => void
  onClick: () => void
  isPending?: boolean
}) => {
  const t = useTranslations()
  return (
    <Dialog
      fullWidth
      open={open}
      onClose={() => setOpen(false)}
      maxWidth='sm'
      scroll='body'
      closeAfterTransition={false}
      sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}
    >
      <DialogCloseButton onClick={() => setOpen(false)} disableRipple>
        <i className='tabler-x' />
      </DialogCloseButton>
      <DialogTitle variant='h4' className='flex gap-2 flex-col text-center sm:pbs-10 sm:pbe-8 sm:pli-10'>
        {t('DIALOG.DELETE_TITLE')}
      </DialogTitle>
      <DialogActions className='justify-center pbs-0 sm:pbe-10 sm:pli-10'>
        <Button
          variant='contained'
          color='error'
          onClick={() => {
            onClick()
          }}
          type='submit'
          isLoading={isPending}
          disabled={isPending}
        >
          PROPERTY.DELETE
        </Button>
        <Button
          variant='outlined'
          color='primary'
          onClick={() => {
            setOpen(false)
          }}
          type='button'
          disabled={isPending}
        >
          KEY.CANCEL
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default DeleteDialog