{"size": 1474, "ext": "js", "max_stars_repo_path": "src/components/Product/Product.js", "max_stars_repo_name": "Neology92/dobrybruk-website", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Product/Product.js", "max_issues_repo_name": "Neology92/dobrybruk-website", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Product/Product.js", "max_forks_repo_name": "Neology92/dobrybruk-website", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.3968253968, "max_line_length": 63, "alphanum_fraction": 0.6037991859}
import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';

import { useClickOutside } from 'utils';
import PopUp from '../PopUp/PopUp';
import Modal from '../Modal/Modal';
import Shutter from '../Shutter/Shutter';

import IconWrapper from './IconWrapper';
import Text from './Text';
import { StyledIcon } from './styled';

const Product = ({ children, icon, name, photo1, photo2 }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const modalRef = useRef(null);

  const switchModal = () => {
    setIsModalOpen(!isModalOpen);
  };

  useClickOutside(modalRef, () => {
    if (isModalOpen) {
      setIsModalOpen(!isModalOpen);
    }
  });

  return (
    <>
      <IconWrapper onClick={switchModal}>
        <span tabIndex="-1">
          <div>
            <StyledIcon src={icon} />
          </div>
          <Text>{name}</Text>
        </span>
      </IconWrapper>

      <Shutter isOpen={isModalOpen} />
      <PopUp isOpen={isModalOpen} ref={modalRef}>
        <Modal
          name={name}
          icon={icon}
          photo1={photo1}
          photo2={photo2}
          setIsModalOpen={setIsModalOpen}
        >
          {children}
        </Modal>
      </PopUp>
    </>
  );
};

Product.propTypes = {
  children: PropTypes.node.isRequired,
  icon: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  photo1: PropTypes.object.isRequired,
  photo2: PropTypes.object.isRequired,
};

export default Product;
