frontAnswerer/lib/ui_kit/timer/CircularTimer.tsx

import { CircularProgress, Box, Typography, useTheme, styled } from "@mui/material";

// Типизация для пропсов таймера
export interface CircularTimerProps {
  duration: number; // Общая длительность в секундах
  remaining: number; // Оставшееся время в секундах
  showTime?: boolean; // Показывать ли время в формате mm:ss
  size?: number; // Размер таймера
  thickness?: number; // Толщина линии прогресса
  color?: string; // Цвет прогресса
}

const StyledCircularProgress = styled(CircularProgress)(({ theme }) => ({
  "& .MuiCircularProgress-circle": {
    strokeLinecap: "round",
    transition: "stroke-dashoffset 0.3s ease",
  },
}));

// Функция для форматирования времени в mm:ss
const formatTime = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
};

export const CustomCircularTimer: React.FC<CircularTimerProps> = ({
  duration,
  remaining,
  showTime = true,
  size = 76,
  thickness = 4,
  color,
}) => {
  const theme = useTheme();
  const progress = (remaining / duration) * 100;

  return (
    <Box
      id="test-timer"
      sx={{ position: "relative", display: "inline-flex", width: size, height: size }}
    >
      {/* Серый фон */}
      <Box
        sx={{
          border: "#9A9AAF solid 1px",
          position: "absolute",
          height: `${size - 4}px`,
          width: `${size - 4}px`,
          borderRadius: "100%",
          top: "2px",
          left: "2px",
        }}
      />

      {/* Основной прогресс */}
      <StyledCircularProgress
        variant="determinate"
        value={progress}
        size={size}
        thickness={thickness}
        sx={{
          color: color || "linear-gradient(135deg, #FC712F 0%, #7E2AEA 100%)",
          position: "absolute",

          "& .MuiCircularProgress-circle": {
            strokeLinecap: "round",
            stroke: color ? undefined : "url(#timer-gradient)",
            strokeDasharray: color ? undefined : undefined,
          },
        }}
      />

      <svg
        width={0}
        height={0}
      >
        <defs>
          <linearGradient
            id="timer-gradient"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="100%"
          >
            <stop
              offset="9.9%"
              stopColor="#FC712F"
            />
            <stop
              offset="73.88%"
              stopColor="#7E2AEA"
            />
          </linearGradient>
        </defs>
      </svg>

      {/* Центральный контент */}
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: `${size - 20}px`,
          height: `${size - 20}px`,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Typography
          variant="body1"
          fontWeight="bold"
          sx={{
            fontSize: size > 60 ? "16px" : "12px",
            fontWeight: 600,
            color: theme.palette.text.primary,
            textAlign: "center",
            lineHeight: 1,
          }}
        >
          {showTime ? formatTime(remaining) : remaining}
        </Typography>
      </Box>
    </Box>
  );
};