import React from "react";
import classNames from "classnames";
import "./JDsideNav.scss";

type IProps = {
  isOpen: boolean;
  setIsOpen: any;
  children?: JSX.Element[] | JSX.Element | string;
}

const JDsideNav: React.FC<IProps> = ({ isOpen, setIsOpen, children }) => {
  const handleCurtainClick = () => {
    setIsOpen(false);
  };

  const classes = classNames({
    JDsideNav: true,
    "JDsideNav--open": isOpen
  });

  return (
    <div className={classes}>
      <div className="JDsideNav__inner">
        {children}
        {/* 사이드 네비 외 가림막 */}
        <div
          role="presentation"
          onClick={handleCurtainClick}
          className={`JDsideNav-curtain ${
            isOpen ? "JDsideNav-curtain--open" : ""
          }`}
        />
      </div>
    </div>
  );
};

export default JDsideNav;