import React from 'react';
import { Box, BoxProps } from './Box';

interface ProgressBarProps extends Omit<BoxProps<'div'>, 'children'> {
  value: number;
  max: number;
  color?: string;
  bg?: string;
  height?: string;
}

export function ProgressBar({
  value,
  max,
  color = 'bg-primary-blue',
  bg = 'bg-deep-graphite',
  height = '2',
  ...props
}: ProgressBarProps) {
  const percentage = Math.min((value / max) * 100, 100);

  return (
    <Box fullWidth bg={bg} rounded="full" height={height} overflow="hidden" {...props}>
      <Box 
        bg={color} 
        rounded="full" 
        fullHeight 
        style={{ width: `${percentage}%` }} 
        className="transition-all duration-500 ease-out"
      />
    </Box>
  );
}