import { ReactNode, ReactElement } from 'react'
import { useTranslation } from 'react-i18next'
import { Modal } from 'react-responsive-modal'
import { Text } from '../Text'
import { Button } from '../Button'

interface ContentModalProps {
  open: boolean
  title?: string
  content: ReactNode | ReactElement
  hasFooter?: boolean
  loading?: boolean
  modalClassName?: string
  onClose: () => void
  onConfirm?: () => void
}
export const ContentModal = (props: ContentModalProps) => {
  const { open, content, title, onClose, onConfirm, hasFooter, loading, modalClassName } = props

  const { t } = useTranslation()

  return (
    <Modal
      open={open}
      onClose={onClose}
      center
      showCloseIcon={false}
      classNames={{
        modal: `rounded-md ${modalClassName || 'min-w-[90%] md:min-w-[32rem] max-w-[50rem] w-fit !m-auto'}`,
        overlay: 'bg-black/50',
        modalContainer: 'flex items-center justify-center p-4',
      }}
    >
      <div className="flex flex-col gap-4 py-4">
        {title && <Text variant="h4" text={title} />}
        {content}
        {hasFooter && (
          <div className="flex justify-center items-center gap-4">
            <Button
              label={t('api.ok') || 'Ok'}
              variant="success"
              isLoading={loading}
              isDisabled={loading}
              className="w-1/3"
              onClick={onConfirm}
              size="sm"
            />
            <Button
              label={t('api.cancel') || 'Cancel'}
              variant="error"
              isDisabled={loading}
              className="w-1/3"
              onClick={onClose}
              size="sm"
            />
          </div>
        )}
      </div>
    </Modal>
  )
}