import React from 'react'
import classnames from 'classnames'

export type MessageProps = {
  id?: string
  type?: string
  state?: string
  text?: string
}

const Message: React.FC<MessageProps> = ({
  id,
  type,
  state,
  text = 'Some content could not load. Check your internet connection or browser settings.',
}) => {
  return (
    <div
      id={id}
      className={classnames('cp-message', 'o-message', {
        [`o-message--${state}`]: state,
        [`o-message--${type}`]: type,
      })}
      data-o-component="o-message"
    >
      <div className="o-message__container">
        <div className="o-message__content">
          <p className="o-message__content-main">{text}</p>
        </div>
      </div>
    </div>
  )
}

export default Message