"use client";

import { Box, LinearProgress, Typography } from "@mui/material";
import React from "react";

interface LinearProgressWithLabelProps {
  completed: number;
  total: number;
  label: string;
}

const LinearProgressWithLabel: React.FC<LinearProgressWithLabelProps> = ({
  completed,
  total,
  label,
}) => {
  const progress = total > 0 ? (completed / total) * 100 : 0;

  return (
    <Box sx={{ width: "100%", mb: 2 }}>
      <Box sx={{ display: "flex", alignItems: "center", mb: 1 }}>
        <Box sx={{ width: "100%", mr: 1 }}>
          <LinearProgress
            variant="determinate"
            value={progress}
            sx={{
              height: 30,
              borderRadius: 5,
            }}
          />
        </Box>
        <Box sx={{ minWidth: 80 }}>
          <Typography variant="body2" color="text.secondary">
            <strong>
              {label}: {completed}/{total}
            </strong>
          </Typography>
        </Box>
      </Box>
    </Box>
  );
};

export default LinearProgressWithLabel;