"use client";

import * as React from "react";
import { Zap } from "lucide-react";
import { cn } from "@/lib/utils";

const STEPS = [10_000, 50_000, 100_000, 250_000, 500_000, 1_000_000];

export function UsagePricingSlider({
  steps = STEPS,
  includedFree = 10_000,
  pricePerThousand = 0.4,
  className,
}: {
  steps?: number[];
  includedFree?: number;
  pricePerThousand?: number;
  className?: string;
}) {
  const [index, setIndex] = React.useState(2);
  const requests = steps[index];
  const billable = Math.max(requests - includedFree, 0);
  const monthly = (billable / 1000) * pricePerThousand;

  return (
    <div className={cn("w-full rounded-2xl border bg-card p-6 sm:p-8", className)}>
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <h3 className="text-sm font-medium text-muted-foreground">Estimated monthly cost</h3>
          <div className="mt-1 flex items-baseline gap-1">
            <span className="text-4xl font-semibold tabular-nums">
              {"$" + monthly.toFixed(2)}
            </span>
            <span className="text-sm text-muted-foreground">/month</span>
          </div>
        </div>

        <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">
          <Zap className="size-3" />
          First {includedFree.toLocaleString()} free
        </span>
      </div>

      <div className="mt-8 space-y-3">
        <div className="flex items-center justify-between text-sm">
          <span className="text-muted-foreground">API requests</span>
          <span className="font-medium tabular-nums">{requests.toLocaleString()}</span>
        </div>

        <input
          type="range"
          min={0}
          max={steps.length - 1}
          step={1}
          value={index}
          onChange={(event) => setIndex(Number(event.target.value))}
          aria-label="Monthly API requests"
          className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary outline-none"
        />

        <div className="flex justify-between text-[11px] tabular-nums text-muted-foreground">
          {steps.map((step) => (
            <span key={step}>{step >= 1_000_000 ? "1M" : step / 1000 + "k"}</span>
          ))}
        </div>
      </div>

      <div className="mt-8 space-y-2 border-t pt-5 text-sm">
        <div className="flex justify-between">
          <span className="text-muted-foreground">Included</span>
          <span className="tabular-nums">{Math.min(requests, includedFree).toLocaleString()}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">Billable</span>
          <span className="tabular-nums">{billable.toLocaleString()}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">Rate</span>
          <span className="tabular-nums">{"$" + pricePerThousand.toFixed(2)} / 1k</span>
        </div>
      </div>

      <button className="mt-6 h-10 w-full rounded-lg bg-primary text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90">
        Start with this plan
      </button>
    </div>
  );
}
Related components
