import React from 'react'
import Vector from 'atoms/Vector'
import { fromPropsToIdentifier } from 'atoms/Icons/deps'

const wording = {
  vectorClassName: 'arrow-down down-arrow down',
  title: 'Down Arrow Icon',
  description: 'An arrow head pointing downwards which is similar to the shape of the alphabet "V"',
  identifier: 'arrow-down',
}
const color = '1E1E1E'
export const DownarrowWrap = styled.div.attrs({
  className: 'arrow-wrapper',
}) `
  width: rem(24);
  height: rem(24);
  display: flex;
  align-items: center;
  justify-content: center;
`
class DownArrow extends React.PureComponent {
  render() {
    const identifier = fromPropsToIdentifier(wording)
    return (
      <DownarrowWrap>
        <Vector width="15px" height="9px" {...wording} namespace={identifier} viewBox="0 0 15 9" {...this.props}>
          <path d="M7.5 5.37L13.4 0 15 2.1 7.5 9 0 2.1 1.63.04z" fill={color} fillRule="evenodd" />
        </Vector>
      </DownarrowWrap>
    )
  }
}
export { DownArrow }
export default DownArrow