import { Progress } from "@nextui-org/react";

type QuotaIndicatorProps = {
  filled: number;
  total: number;
};

function QuotaIndicator({ filled, total }: QuotaIndicatorProps) {
  const pct = (filled / total) * 100;

  return (
    <div className="flex items-center gap-3">
      <div className="text-right">
        <p className="text-[11px] uppercase tracking-wider font-semibold text-gray-400 dark:text-gray-300">
          Quota
        </p>
        <p className="text-lg font-bold text-gray-900 dark:text-white leading-tight tabular-nums">
          {filled}{" "}
          <span className="text-gray-300 dark:text-neutral-600">/</span> {total}
        </p>
      </div>
      <Progress
        aria-label="Quota progress"
        classNames={{
          base: "w-24",
          track: "bg-gray-200 dark:bg-neutral-700",
          indicator: "bg-gray-900 dark:bg-neutral-300",
        }}
        radius="full"
        size="sm"
        value={pct}
      />
    </div>
  );
}

export default QuotaIndicator;