import * as React from 'react'

/**
 * @category Components
 */
export const FallbackImageMessage = ({
  children,
  backgroundColor = `rgba(25,25,25,.1)`,
  className = ``,
  style = {},
  tag = `div`,
  ...props
}) => {
  const Tag = tag
  return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    <Tag
      {...props}
      className={`
        ${className}
      `}
      style={{
        backgroundColor,
        height: `100%`,
        width: `100%`,
        display: `flex`,
        placeItems: `center`,
        placeContent: `center`,
        textAlign: `center`,
        paddingLeft: `1em`,
        paddingRight: `1em`,
        ...style,
      }}
    >
      <p>{children}</p>
    </Tag>
  )
}

export default FallbackImageMessage