import clsx from "clsx";

import styles from "styles/chapter.module.scss";

interface ToolbarProps {
  open: boolean;
  type?: string;
  onChangeSettings: (type?: string) => void;
}

const Toolbar = (props: ToolbarProps) => {
  const { open, type, onChangeSettings } = props;

  return (
    <div
      className={clsx(styles["toolbar"], {
        hidden: !open,
      })}
    >
      <div className={styles["toolbar-items"]}>
        <button
          className={clsx(styles["toolbar-item"], {
            [styles["toolbar-item-current"]]: type === "toc",
          })}
          title="Table Of Contents"
          onClick={() => onChangeSettings("toc")}
        >
          <svg>
            <use xlinkHref="/icons.svg#items"></use>
          </svg>
        </button>
        <button
          className={clsx(styles["toolbar-item"], {
            [styles["toolbar-item-current"]]: type === "settings",
          })}
          title="Display Options"
          onClick={() => onChangeSettings("settings")}
        >
          <svg>
            <use xlinkHref="/icons.svg#set"></use>
          </svg>
        </button>
        {/* <button className={styles["toolbar-item"]} title="">
          <svg>
            <use xlinkHref="/icons.svg#reviews"></use>
          </svg>
        </button>
        <a className={styles["toolbar-item"]} href="/help" title="Help center">
          <svg>
            <use xlinkHref="/icons.svg#help_bold"></use>
          </svg>
        </a> */}
      </div>
    </div>
  );
};

export default Toolbar;
