Usage meter

'use client';

import * as React from 'react';
import { UsageMeter } from './usage-meter';

const LIMIT = 2000;
const RESET = new Date(2026, 9, 12);
// Credits spent in steps, so the meter passes Low and reaches Out.
const STEPS: [at: number, used: number][] = [
  [1400, 1640],
  [2900, 2000],
];

export default function UsageMeterDemo({ replay = 0 }: { replay?: number }) {
  const [used, setUsed] = React.useState(760);

  // Replay sets the credits back to 760 and spends them again.
  React.useEffect(() => {
    if (replay === 0) return;
    setUsed(760);
    const timers = STEPS.map(([at, value]) => window.setTimeout(() => setUsed(value), at));
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay]);

  return (
    <div className="flex w-full max-w-[400px] flex-col gap-8 rounded-xl border border-secondary bg-primary p-6">
      <UsageMeter
        used={used}
        limit={LIMIT}
        label="Monthly credits"
        unit="credits"
        resetAt={RESET}
        onUpgrade={() => {}}
      />
      <div className="flex flex-col gap-3 rounded-2xl border border-secondary bg-primary_alt p-4 shadow-xs">
        <p className="text-sm text-tertiary">Write a message</p>
        <div className="flex items-center justify-end gap-3">
          <UsageMeter
            variant="ring"
            used={used}
            limit={LIMIT}
            label="Monthly credits"
            unit="credits"
            resetAt={RESET}
          />
        </div>
      </div>
    </div>
  );
}