import { Box } from "@mui/material";
import { Languages, languageStore } from "../../store/LanguageStore";
import { observer } from "mobx-react-lite";

export const LanguageSwitch = observer(({ action }: any) => {
  const { language, setLanguageAction } = languageStore;

  const handleLanguageChange = (lang: Languages) => {
    action?.();
    setLanguageAction(lang);
  };

  return (
    <Box
      sx={{
        flex: 1,
        display: "flex",
        gap: 2,
      }}
    >
      <Box
        sx={{
          cursor: "pointer",
          flex: 1,
          display: "flex",
          justifyContent: "center",
          bgcolor: language === "ru" ? "primary.main" : "transparent",
          color: language === "ru" ? "white" : "inherit",
          borderRadius: 1,
          p: 1,
        }}
        onClick={() => handleLanguageChange("ru")}
      >
        RU
      </Box>
      <Box
        sx={{
          cursor: "pointer",
          flex: 1,
          display: "flex",
          justifyContent: "center",
          bgcolor: language === "en" ? "primary.main" : "transparent",
          color: language === "en" ? "white" : "inherit",
          borderRadius: 1,
          p: 1,
        }}
        onClick={() => handleLanguageChange("en")}
      >
        EN
      </Box>
      <Box
        sx={{
          cursor: "pointer",
          flex: 1,
          display: "flex",
          justifyContent: "center",
          bgcolor: language === "zh" ? "primary.main" : "transparent",
          color: language === "zh" ? "white" : "inherit",
          borderRadius: 1,
          p: 1,
        }}
        onClick={() => handleLanguageChange("zh")}
      >
        ZH
      </Box>
    </Box>
  );
});