import cx from "classnames";
import React from "react";

export interface ProgressProps {
  /** Color of the indicator */
  color?: "orange" | "green" | "yellow" | "red" | "blue";
  /** Provides clear instruction on what the horizontal bar represents */
  label: React.ReactNode;
  /** Textual representation of the indicator */
  value: React.ReactNode;
  /** Width of the progress indicator where 0 = empty, 1 = full */
  width?: number;
  className?: string;
  children?: React.ReactNode;
}

const defaultProps = {
  color: "orange" as const,
};

const CLASS_ROOT = "progress"; // class is defined by boosted

export const Progress: React.FC<ProgressProps> = ({
  color = defaultProps.color,
  label,
  value,
  width,
  className,
  ...other
}) => {
  return (
    <div className={cx(CLASS_ROOT, className)} {...other}>
      <div className={`${CLASS_ROOT}__label`}>{label}</div>
      <div className={`${CLASS_ROOT}__bar`}>
        <div
          className={cx(`${CLASS_ROOT}__indicator`, {
            [`${CLASS_ROOT}__indicator--${color}`]:
              color !== defaultProps.color,
          })}
          style={{ width: `${width ? width * 100 : 0}%` }}
        />
      </div>
      <div className={`${CLASS_ROOT}__value`}>{value}</div>
    </div>
  );
};

Progress.displayName = "Progress";