import React from 'react'
import Vector from 'atoms/Vector'
import { PlaceholderVectorProps } from '../typings'
import { stripMeasurement } from '../deps'

class SquarePlaceholder extends React.PureComponent<PlaceholderVectorProps> {
  static defaultProps = {
    fill: '#D8D8D8',
    width: '100%',
    height: '100%',
    viewBox: '0 0 100% 100%',
    isDynamicViewBox: true,
  }
  render() {
    let { fill, width, height, viewBox, ...remainingProps } = this.props
    width = stripMeasurement(width)
    height = stripMeasurement(width)

    viewBox = `0 0 ${width} ${height}`

    const attributes = {
      width,
      height,
      viewBox,
      ...remainingProps,
    }

    return (
      <Vector {...attributes}>
        <rect
          width={width}
          height={height}
          d="M0 0h100v100H0z"
          fill={fill}
          fillRule="evenodd"
        />
      </Vector>
    )
  }
}
export { SquarePlaceholder }
export default SquarePlaceholder