import { useToken } from "@frontend/kitui";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
import {
  Box,
  Container,
  IconButton,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useUserStore } from "@root/user";
import { LogoutButton } from "@ui_kit/LogoutButton";
import { handleLogoutClick } from "@utils/HandleLogoutClick";
import { Link, useNavigate } from "react-router-dom";
import Logotip from "../../../pages/Landing/images/icons/QuizLogo";

interface TariffsHeaderProps {
  cashString: string;
}

export const TariffsHeader = ({ cashString }: TariffsHeaderProps) => {
  const theme = useTheme();
  const navigate = useNavigate();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  return (
    <Container
      component="nav"
      disableGutters
      maxWidth={false}
      sx={{
        px: "16px",
        display: "flex",
        height: "80px",
        alignItems: "center",
        gap: isMobile ? "7px" : isTablet ? "20px" : "60px",
        flexDirection: "row",
        justifyContent: "space-between",
        bgcolor: "white",
        borderBottom: "1px solid #E3E3E3",
      }}
    >
      <Link to="/">
        <Logotip width={124} />
      </Link>
      <IconButton onClick={() => navigate("/list")}>
        <ArrowLeft color="black" />
      </IconButton>
      <Box sx={{ display: "flex", ml: "auto" }}>
        <Box sx={{ whiteSpace: "nowrap" }}>
          <Typography
            sx={{
              fontSize: "12px",
              lineHeight: "14px",
              color: "gray",
            }}
          >
            Мой баланс
          </Typography>
          <Typography
            variant="body2"
            color={"#7e2aea"}
            fontSize={
              isMobile ? (cashString.length > 9 ? "13px" : "16px") : "16px"
            }
          >
            {cashString}
          </Typography>
        </Box>
        <LogoutButton
          onClick={() => {
            navigate("/");
            handleLogoutClick();
          }}
          sx={{
            ml: "20px",
          }}
        />
      </Box>
    </Container>
  );
}; 