'use client';

import React from 'react';
import styled from 'styled-components';
import { theme } from '@/styles/theme';

interface ProgressBarProps {
  value: number; // 0-100
  size?: 'sm' | 'md';
}

const Track = styled.div<{ $size: 'sm' | 'md' }>`
  width: 100%;
  height: ${({ $size }) => ($size === 'sm' ? '4px' : '6px')};
  background: rgba(240, 246, 252, 0.08);
  border-radius: 999px;
  overflow: hidden;
`;

const Fill = styled.div<{ $value: number }>`
  height: 100%;
  width: ${({ $value }) => $value}%;
  background: ${({ $value }) =>
    $value >= 80 ? '#00FF00' :
    $value >= 40 ? '#58A6FF' :
    'var(--text-secondary)'};
  border-radius: 999px;
  transition: width 0.4s ease;
`;

export default function ProgressBar({ value, size = 'md' }: ProgressBarProps) {
  return (
    <Track $size={size}>
      <Fill $value={Math.min(100, Math.max(0, value))} />
    </Track>
  );
}