Usage meter

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { UsageMeter } from "@/components/ui/usage-meter"

export function StorageMeter() {
  const [used, setUsed] = useState(742);
  const [day, setDay] = useState(9);
  const projected = Math.round((used / day) * 31);
  const over = projected - 1000;
  const consequence = used > 1000
    ? `Over the limit by ${used - 1000}k. Extra requests are $0.05 per 1k: $${((used - 1000) * 0.05).toFixed(2)} so far.`
    : over > 0
      ? `At this pace you reach about ${(projected / 1000).toFixed(2)}M by 31 Oct: roughly $${Math.round(over * 0.05)} extra.`
      : `Projected ${projected}k by 31 Oct. Comfortably inside the limit.`;
  return (
    <div className="grid w-full max-w-md gap-3">
      <UsageMeter
        label={`API requests · day ${day} of 31`}
        unit="k"
        limit={1000}
        projected={projected}
        consequence={consequence}
        segments={[
          { id: "api", label: "REST", value: Math.round(used * 0.7) },
          { id: "webhooks", label: "Webhooks", value: used - Math.round(used * 0.7) },
        ]}
      />
      <div className="flex flex-wrap gap-2">
        <Button size="sm" variant="secondary" onClick={() => setUsed((value) => value + 120)}>+120k requests</Button>
        <Button size="sm" variant="secondary" onClick={() => setDay((value) => Math.min(31, value + 1))}>Advance a day</Button>
        <Button size="sm" variant="ghost" onClick={() => { setUsed(742); setDay(9); }}>Reset</Button>
      </div>
    </div>
  );
}