import PropTypes from 'prop-types'
import { Flex } from 'antd'
const Flag = ({
  code,
  size = 'middle',
  hasBorder = false,
  hasDropShadow = false,
  borderRadius = 0
}) => {
  const useRelativePath =
    typeof window !== 'undefined' && window.location.href.includes('index.html')
  var flagContainerStyle = {}
  var flagStyle = {}
  if (hasBorder == true) {
    flagContainerStyle = {
      ...flagContainerStyle,
      outline: '1px solid #8080805F',
      outlineOffset: '-1px'
    }
  }
  if (hasDropShadow == true) {
    flagContainerStyle = {
      ...flagContainerStyle,
      boxShadow: '0px 2px 10px 1px #82828242'
    }
  }
  if (borderRadius > 0) {
    flagContainerStyle = {
      ...flagContainerStyle,
      borderRadius: `${borderRadius}px`
    }
    flagStyle = { ...flagStyle, borderRadius: `${borderRadius}px` }
  }
  return (
    <Flex style={flagContainerStyle}>
      <img
        src={`${useRelativePath ? '.' : ''}/flags/${size}/${code}.svg`}
        style={flagStyle}
      />
    </Flex>
  )
}

Flag.propTypes = {
  code: PropTypes.string.isRequired,
  size: PropTypes.string,
  hasBorder: PropTypes.bool,
  hasDropShadow: PropTypes.bool,
  borderRadius: PropTypes.number
}

export default Flag