import React, { FC, PropsWithChildren } from 'react'
import { InfoCircleOutlined } from '@ant-design/icons'
import styled from 'styled-components'

const StyledIcon = styled(InfoCircleOutlined)`
  display: inline-block;
  margin-right: 6px;
  font-size: 14px;
  line-height: 16px;
  vertical-align: top;

  ${props => props.theme.breakpoints.down('s')} {
    font-size: 12px;
    margin-right: 4px;
    line-height: 18px;
  }
`
export const ErrorMessage: FC<PropsWithChildren<{ message?: string }>> = ({ message, children }) => {
	return <><StyledIcon />{children || message}</>
}