import React from "react";
import PropTypes from "prop-types";
import { ProgressBarContainer, ProgressBarValue } from "./styles";

const ProgressBar = ({ value, minValue, maxValue, color, size, bgColor }) => (
  <ProgressBarContainer size={size} bgColor={bgColor}>
    <ProgressBarValue
      value={value}
      minValue={minValue}
      maxValue={maxValue}
      color={color}
      size={size}
    />
  </ProgressBarContainer>
);

ProgressBar.propTypes = {
  value: PropTypes.number.isRequired,
  minValue: PropTypes.number,
  maxValue: PropTypes.number.isRequired,
  color: PropTypes.string,
  size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]),
  bgColor: PropTypes.string,
};

ProgressBar.defaultProps = {
  color: "#007aff",
  size: "md",
  bgColor: "#eee",
};

export default ProgressBar;
