import React from 'react'
import { DefaultProps } from '../../typings'
import Vector from '../../../Vector'

// extending interface from Label component
interface Props extends DefaultProps {}

const wording = {
  title: 'UK Flag Icon',
  description: 'A icon, representing a united kingdom flag.',
}

class UKFlagIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '60px',
    height: '30px',
    viewBox: '0 0 60 30',
  }

  render() {
    return (
      <Vector {...this.props} {...wording} vectorClassName={'ukflagicon'}>
        <path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z" />
        <path d="M0,0 v30 h60 v-30 z" fill="#00247d" />
        <path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" strokeWidth="6" />
        <path
          d="M0,0 L60,30 M60,0 L0,30"
          clipPath="url(#t)"
          stroke="#cf142b"
          strokeWidth="4"
        />
        <path d="M30,0 v30 M0,15 h60" stroke="#fff" strokeWidth="10" />
        <path d="M30,0 v30 M0,15 h60" stroke="#cf142b" strokeWidth="6" />
      </Vector>
    )
  }
}

export { UKFlagIcon }
export default UKFlagIcon