import React from 'react';
import { string, func, node } from 'prop-types';
import styled from 'styled-components';
import { FONT_BOLD, WHITE, EERIE_BLACK, LIGHT_SEA_GREEN, ISABELLINE } from '@vincent_za/styles';
import { addSvg } from '@vincent_za/assets';

import Svg from '../../Svg/component';

const Wrap = styled.button`
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.6rem;
  height: 5.6rem;
  background-color: ${LIGHT_SEA_GREEN};
  color: ${ISABELLINE};
  font-family: ${FONT_BOLD};
  border-radius: 50%;
  text-transform: uppercase;
  box-shadow: 0 0.6rem 1.1rem -0.4rem ${EERIE_BLACK}, 0 0 1.6rem -2px ${EERIE_BLACK};
  cursor: pointer;
`;

const SvgStyled = styled(Svg)`
  svg {
    fill: ${ISABELLINE};

    ${Wrap}:hover & {
      fill: ${WHITE};
    };
  };
`;

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

    return (
      <Wrap
        className={className}
        onClick={onClick}
      >
        {children || <SvgStyled svg={addSvg} size={1.6} />}
      </Wrap>
    );
  }
}

ButtonFloating.propTypes = {
  className: string,
  children: node,
  onClick: func,
};

ButtonFloating.defaultProps = {
  onClick() {},
  children: undefined,
  className: '',
};

export default ButtonFloating;
