import PropTypes from 'prop-types';
import * as React from 'react';
import styled from 'styled-components';
import { FasTimes, FasBars } from '../../Atoms/Icons';
import { screenSize, theme } from '../../Tools/interpolation';
var TogglerExpand =
/*#__PURE__*/
styled(FasTimes).withConfig({
  componentId: "sc-1til0ak-0"
})(["\n  fill: ", ";\n  z-index: ", ";\n\n  &:hover {\n    fill: ", ";\n  }\n\n  @media (min-width: ", ") {\n    display: none;\n  }\n"], theme('navbarTogglerColor'), theme('navbarTogglerZIndex'), theme('navbarTogglerColor'), screenSize('sm'));
var TogglerCollapse =
/*#__PURE__*/
styled(FasBars).withConfig({
  componentId: "sc-1til0ak-1"
})(["\n  fill: ", " !important;\n\n  &:hover {\n    fill: ", " !important;\n  }\n\n  @media (min-width: ", ") {\n    display: none;\n  }\n"], theme('navbarTogglerColor'), theme('navbarTogglerColor'), screenSize('sm'));

var NavbarToggler = function NavbarToggler(_ref) {
  var onToggle = _ref.onToggle,
      toggled = _ref.toggled;
  return toggled === true ? React.createElement(TogglerExpand, {
    onClick: onToggle,
    selectable: true,
    size: "20px"
  }) : React.createElement(TogglerCollapse, {
    onClick: onToggle,
    selectable: true,
    size: "25px"
  });
};

NavbarToggler.propTypes = process.env.NODE_ENV !== "production" ? {
  onToggle: PropTypes.func.isRequired,
  toggled: PropTypes.bool
} : {};
NavbarToggler.defaultProps = {
  toggled: false
};
export default NavbarToggler;