import { Card, Flex, Typography } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import PropTypes from 'prop-types'

const { Text } = Typography

const LoadingPlaceholder = ({ message, hasBackground = true }) => {
  return (
    <Card
      size='small'
      style={{
        background: hasBackground == false ? 'transparent' : undefined,
        border: hasBackground == false ? '1px solid rgb(0 0 0 / 7%)' : undefined
      }}
    >
      <Flex
        justify='center'
        gap={'small'}
        style={{
          height: '100%'
        }}
        align='center'
      >
        <Text type='secondary'>
          <LoadingOutlined />
        </Text>
        <Text type='secondary'>{message}</Text>
      </Flex>
    </Card>
  )
}

LoadingPlaceholder.propTypes = {
  message: PropTypes.string.isRequired,
  hasBackground: PropTypes.bool
}

export default LoadingPlaceholder