import { auth } from "@renderer/util/firebase";
import { Layout, Menu } from "antd";
import { MenuItemType } from "antd/es/menu/interface";
import { signOut } from "firebase/auth";
import { useTranslation } from "react-i18next";
import { NavLink } from "react-router";

const NavigationHeader: React.FC = () => {
  const { t } = useTranslation();
  //const isWatcherStarted = useAppSelector(selectWatcherStatus);
  const menuItems: MenuItemType[] = [
    { label: <NavLink to="/">{t("navigation.home")}</NavLink>, key: "home" },
    {
      label: t("navigation.signout"),
      key: "watchlist",
      onClick: (): void => {
        signOut(auth);
      },
    },
  ];
  return (
    // <Badge.Ribbon
    //   text={
    //     isWatcherStarted
    //       ? t("settings.labels.started")
    //       : t("settings.labels.stopped")
    //   }
    //   color={isWatcherStarted ? "green" : "red"}
    // >
    <Layout.Header style={{ display: "flex", alignItems: "center" }}>
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={["2"]}
        items={menuItems}
        style={{ flex: 1, minWidth: 0 }}
      />
    </Layout.Header>
    // </Badge.Ribbon>
  );
};

export default NavigationHeader;
