import React from "react";
import {
  BarContainer,
  StyledBar,
  StyledBarValue,
  StyledContainer,
  StyledEmptyBarValue,
} from "./styles";

const ProgressBar = ({ height = "14px", width = "100%", value = 0 }) => {
  const renderBar = () => {
    return (
      <BarContainer height={height} width={width}>
        <StyledBar bartype="negative" value={value}>
          <StyledBarValue sx={{ transition: "all 300ms ease-out" }} />
          <StyledEmptyBarValue />
        </StyledBar>
      </BarContainer>
    );
  };
  return (
    <StyledContainer height={height} width={width}>
      {renderBar()}
    </StyledContainer>
  );
};

ProgressBar.propTypes = {};

export default ProgressBar;