import { Menu, useMantineColorScheme } from "@mantine/core";
import { IconCode, IconMoon, IconRefresh, IconSun } from "@tabler/icons-react";
import { ReactNode } from "react";
export interface ISettingsProps {
  children: ReactNode;
  funtions?: {
    refresh?: () => void;
  };
}

export default function Settings({ children, funtions }: ISettingsProps) {
  const openDevtools = () => {
    window.ipcRenderer?.openDevTools();
  };

  const {toggleColorScheme, colorScheme}= useMantineColorScheme()
  return (
    <Menu shadow="md" width={200}>
      <Menu.Target>{children}</Menu.Target>

      <Menu.Dropdown className="text-xs">
        <Menu.Label className="text-xs">Application</Menu.Label>
        <Menu.Item
          onClick={openDevtools}
          leftSection={<IconCode size={12} />}
          className="text-xs"
        >
          Devtool
        </Menu.Item>
        <Menu.Item
          onClick={funtions?.refresh}
          leftSection={<IconRefresh size={12} />}
          className="text-xs"
        >
          Refresh
        </Menu.Item>
        <Menu.Item
          onClick={toggleColorScheme}
          leftSection={colorScheme === 'dark'?<IconSun size={12} />: <IconMoon size={12}/>}
          className="text-xs flex items-center capitalize"
        >
          {colorScheme === 'dark' ? 'Light' : 'Dark'}
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
}