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

const { Text } = Typography

const MissingPlaceholder = ({ message }) => {
  return (
    <Card size='small'>
      <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
}

export default MissingPlaceholder