import React from 'react';
import { IonProgressBar } from '@ionic/react';

interface CustomProgressBarProps {
  value: number; // 0 to 1
  label?: string;
  statusText?: string;
  color?: string; // Hex, rgb, or css variable
  showPercent?: boolean;
  style?: React.CSSProperties;
}

export const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
  value,
  label,
  statusText,
  color = 'var(--ion-color-primary)',
  showPercent = true,
  style,
}) => {
  const percentage = Math.round(Math.min(Math.max(value, 0), 1) * 100);

  return (
    <div style={{ width: '100%', ...style }}>
      {/* Label and Status */}
      {(label || statusText || showPercent) && (
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'baseline',
            fontSize: '0.8rem',
            marginBottom: '6px',
            fontWeight: '600',
          }}
        >
          <span style={{ color: 'var(--ion-color-medium)' }}>
            {label}{' '}
            {statusText && (
              <span style={{ fontWeight: 'normal', opacity: 0.85 }}>
                • {statusText}
              </span>
            )}
          </span>
          {showPercent && (
            <span
              style={{
                color: color,
                fontVariantNumeric: 'tabular-nums',
                fontFamily: 'ui-monospace, monospace',
                fontWeight: '700',
              }}
            >
              {percentage}%
            </span>
          )}
        </div>
      )}

      {/* Progress Track */}
      <IonProgressBar
        value={value}
        style={
          {
            height: '6px',
            '--background': 'rgba(148, 163, 184, 0.1)',
            '--progress-background': color,
            borderRadius: '10px',
            transition: 'value 0.3s ease',
          } as React.CSSProperties
        }
      />
    </div>
  );
};

export default CustomProgressBar;