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

const ViewDialog = ({
  open,
  setOpen,
  content
}: {
  open: boolean
  setOpen: (open: boolean) => void
  content: ReactNode
}) => {
  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>
      <DialogContent className='flex gap-2 flex-col text-center sm:pbs-10 sm:pbe-8 sm:pli-10'>{content}</DialogContent>
      <DialogActions className='justify-center pbs-0 sm:pbe-10 sm:pli-10'>
        <Button
          variant='outlined'
          color='error'
          onClick={() => {
            setOpen(false)
          }}
          type='button'
        >
          KEY.CANCEL
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default ViewDialog