import { Card, Flex, Typography } from 'antd'
import InfoCircleIcon from '../../Icons/InfoCircleIcon'
import PropTypes from 'prop-types'

const { Text } = Typography

const MissingPlaceholder = ({
  message,
  hasBackground = true,
  hasBorder = true,
  mutedBorder = false,
  padding = '16px',
  height = undefined
}) => {
  var border = undefined
  if (hasBorder == false) {
    border = 'none'
  } else if (mutedBorder == true && hasBorder == true) {
    border = '1px solid var(--color-descriptions-border)'
  }
  return (
    <Card
      size='small'
      style={{
        background: hasBackground == false ? 'transparent' : undefined,
        border: border
      }}
      styles={{
        body: {
          padding: padding,
          height: height
        }
      }}
    >
      <Flex
        justify='center'
        gap={'small'}
        style={{
          height: '100%'
        }}
        align='center'
      >
        <Text type='secondary'>
          <InfoCircleIcon />
        </Text>
        <Text type='secondary'>{message}</Text>
      </Flex>
    </Card>
  )
}

MissingPlaceholder.propTypes = {
  message: PropTypes.string.isRequired,
  hasBackground: PropTypes.bool,
  hasBorder: PropTypes.bool,
  mutedBorder: PropTypes.bool,
  padding: PropTypes.string,
  height: PropTypes.string
}

export default MissingPlaceholder