import clsx from "clsx";
import { FC } from "react";

import GearIcon from "@dndbeyond/fontawesome-cache/svgs/solid/gear.svg";

import { Button, ButtonProps } from "~/components/Button";
import { useSidebar } from "~/contexts/Sidebar";

import { PaneComponentEnum } from "../Sidebar/types";
import styles from "./styles.module.css";

export interface SettingsButtonProps extends ButtonProps {
  context: string;
}

export const SettingsButton: FC<SettingsButtonProps> = ({
  className,
  context,
  ...props
}) => {
  const { pane } = useSidebar();
  const { SETTINGS } = PaneComponentEnum;

  const handleClick = () => pane?.paneHistoryPush(SETTINGS, { context });

  return (
    <Button
      className={clsx([styles.settingsButton, className])}
      onClick={handleClick}
      variant="text"
      size="small"
      themed
      {...props}
    >
      <GearIcon />
      Settings
    </Button>
  );
};