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

class RectanglePlaceholder extends React.PureComponent<PlaceholderVectorProps> {
  static defaultProps = {
    fill: '#D8D8D8',
    width: '100%',
    height: '65',
    viewBox: '0 0 100% 65',
    isDynamicViewBox: true,
  }
  render() {
    let { fill, width, height, style, viewBox, ...remainingProps } = this.props
    // width = '100%'
    height = stripMeasurement(height)
    viewBox = `0 0 ${width} ${height}`
    const attributes = {
      width,
      height,
      viewBox,
      ...remainingProps,
    }

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