import React from 'react';
import { bool, string, node } from 'prop-types';
import styled from 'styled-components';
import { REM_FONT_SIZE__SM, FONT_NORMAL, COLOR_PRIMARY, WHITE } from '@vincent_za/styles';

const Wrap = styled.div`
  display: ${props => props.isHidden ? 'none' : 'flex'};
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: ${REM_FONT_SIZE__SM};
  background-color: ${COLOR_PRIMARY};
  border-radius: 50%;
  color: ${WHITE};
  font-family: ${FONT_NORMAL};
  font-family: sans-serif;
`;

const Content = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;

class Counter extends React.PureComponent {
  render() {
    const { isHidden, children, className } = this.props;

    return (
      <Wrap isHidden={isHidden} className={className}>
        <Content>
          {children}
        </Content>
      </Wrap>
    );
  }
}

Counter.propTypes = {
  isHidden: bool,
  children: node.isRequired,
  className: string,
};

Counter.defaultProps = {
  isHidden: false,
  className: undefined,
};

export default Counter;
