import React from 'react';
import { SBox } from '../../s-components/layout/s-box';
import { SBarLine } from './s-conponents/s-bar-line';
import { SBarGradientLine } from './s-conponents/s-bar-gradient-line';

type TProps = {
  value: string | number;
  colors: {
    fg: string[];
    bg: string;
  };
  minWidth: number;
};

export const BarGraph: React.FC<TProps> = props => {
  const { value, colors, minWidth } = props;

  return (
    <SBox position="relative">
      <SBarLine bg={colors.bg} />

      <SBarGradientLine colors={colors.fg} width={value} minWidth={minWidth} />
    </SBox>
  );
};

BarGraph.defaultProps = {};