import React, { FC } from 'react';
import { MarginProps } from 'styled-system';
import { Box } from '../Box';

export type ProgressBarProps = {
  percent: number;
  height?: number;
  width?: number | string;
  borderRadius?: number;
  bg?: string;
  bar?: string;
} & MarginProps;

export const ProgressBar: FC<ProgressBarProps> = ({
  percent = 0,
  height = 8,
  width = '100%',
  borderRadius = 100,
  bg = 'brandLightest',
  bar = 'brandMain',
  ...restProps
}) => {
  return (
    <Box
      bg={bg}
      borderRadius={borderRadius}
      height={height}
      width={width}
      {...restProps}
    >
      <Box
        bg={bar}
        borderRadius={borderRadius}
        height={height}
        width={`${percent}%`}
      />
    </Box>
  );
};
