import { Box, LinearProgress, linearProgressClasses } from "@mui/material";
import { forwardRef } from "react";

export interface LinearProgressProps {
  color?: string;
  height?: number;
}

const LinearProgressComponent = forwardRef(({ color, height = 8, ...rest }: LinearProgressProps, ref) => {
  return (
    <Box sx={{ width: "100%", maxWidth: 200, ...rest }} ref={ref}>
      <LinearProgress
        variant="indeterminate"
        sx={{
          height: height,
          borderRadius: height / 2,
          [`&.${linearProgressClasses.colorPrimary}`]: {
            backgroundColor: (theme) => theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
          },
          [`& .${linearProgressClasses.bar}`]: {
            borderRadius: height / 2,
            backgroundColor: color || ((theme) => theme.palette.primary.main),
          },
        }}
      />
    </Box>
  );
});

export default LinearProgressComponent;
