import React from 'react';
import { cn } from '../../utils/classNames';

interface UsageMeterProps {
  used: number;
  limit: number;
  unlimited?: boolean;
  label?: string;
  className?: string;
}

/** A compact usage bar: "X of Y messages" with a progress fill that warns as it fills. */
const UsageMeter: React.FC<UsageMeterProps> = ({ used, limit, unlimited = false, label = 'Messages used', className }) => {
  const ratio = unlimited || limit <= 0 ? 0 : Math.min(1, used / limit);
  const pct = Math.round(ratio * 100);
  const tone = ratio >= 1 ? 'bg-danger' : ratio >= 0.85 ? 'bg-warning' : 'bg-brand';

  return (
    <div className={className}>
      <div className="mb-1.5 flex items-center justify-between text-sm">
        <span className="text-app-muted">{label}</span>
        <span className="font-medium text-app-text">
          {unlimited ? 'Unlimited' : `${used.toLocaleString()} / ${limit.toLocaleString()}`}
        </span>
      </div>
      {!unlimited && (
        <div
          className="h-2 w-full overflow-hidden rounded-full bg-app-surface-muted"
          role="progressbar"
          aria-valuemin={0}
          aria-valuemax={limit}
          aria-valuenow={used}
        >
          <div className={cn('h-full rounded-full transition-[width] duration-300', tone)} style={{ width: `${pct}%` }} />
        </div>
      )}
    </div>
  );
};

export default UsageMeter;