frontPanel/src/pages/createQuize/AvailablePrivilege.tsx

import { Box, Typography } from "@mui/material";
import { useUserStore } from "@root/user";

export default function AvailablePrivilege() {
  const user = useUserStore();
  const userPrivileges = user.userAccount?.privileges;
  console.log("это доступные привелегии", userPrivileges);
  const DayForm = ["день", "дня", "дней"];
  function declOfNum(n: number, text_forms: string[]) {
    n = Math.abs(n) % 100;
    var n1 = n % 10;
    if (n > 10 && n < 20) {
      return text_forms[2];
    }
    if (n1 > 1 && n1 < 5) {
      return text_forms[1];
    }
    if (n1 == 1) {
      return text_forms[0];
    }
    return text_forms[2];
  }
  const quizUnlimTime = userPrivileges?.quizUnlimTime?.amount || 0;
  const quizCnt = userPrivileges?.quizCnt?.amount || 0;
  const squizHideBadge = userPrivileges?.squizHideBadge?.amount || 0;
  return (
    <Box
      sx={{
        padding: "20px",
        backgroundColor: "#9A9AAF17",
        width: "100%",
        borderRadius: "12px",
        display: "flex",
        gap: "20px",
        flexWrap: "wrap",
      }}
    >
      <Typography variant={"body1"} sx={{ color: "#9A9AAF" }}>
        Вам доступно:
      </Typography>
      <Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
        Безлимитные заявки:{" "}
        <strong>
          {quizUnlimTime} {declOfNum(quizUnlimTime, DayForm)}
        </strong>
      </Typography>
      {quizCnt !== 0 && (
        <Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
          Заявки: <strong>{quizCnt} шт.</strong>
        </Typography>
      )}
      {squizHideBadge !== 0 && (
        <Typography variant={"body1"} sx={{ color: "#4D4D4D" }}>
          Скрытие логотипа PenaQuiz:{" "}
          <strong>
            {squizHideBadge} {declOfNum(squizHideBadge, DayForm)}
          </strong>
        </Typography>
      )}
    </Box>
  );
}