Slider

"use client";

import * as React from "react";
import { Slider, SliderRange } from "@/components/ui/slider";

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const primitivePreviewCardSurfaceFrameClass = cn(
  "relative isolate overflow-hidden rounded-2xl",
  "border",
);

const primitivePreviewCardSurfaceLightClass = cn(
  "border-black/[0.08] bg-[#f4f4f5]",
  "[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);

const primitivePreviewCardSurfaceClass = cn(
  primitivePreviewCardSurfaceFrameClass,
  primitivePreviewCardSurfaceLightClass,
  // Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
  // PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
  "dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);

function PreviewPanel({
  title,
  subtitle,
  children,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}) {
  return (
    <div className={cn(primitivePreviewCardSurfaceClass, "w-full max-w-md p-5")}>
      <div className="mb-5 border-b border-[var(--border)] pb-3">
        <p className="text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
          {title}
        </p>
        {subtitle ? (
          <p className="mt-1 text-[12px] text-[var(--muted-foreground)]">
            {subtitle}
          </p>
        ) : null}
      </div>
      {children}
    </div>
  );
}

export function SliderPreview() {
  const [volume, setVolume] = React.useState(62);
  const [price, setPrice] = React.useState<[number, number]>([20, 80]);

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <PreviewPanel
        title="Volume"
        subtitle="Drag or use the arrow keys. A value bubble appears while you interact."
      >
        <Slider
          value={volume}
          onValueChange={setVolume}
          formatValue={(v) => `${Math.round(v)}%`}
          label="Volume"
        />
      </PreviewPanel>

      <PreviewPanel
        title="Price range"
        subtitle="Dual-thumb variant with a minimum distance between handles."
      >
        <SliderRange
          value={price}
          onValueChange={setPrice}
          minDistance={10}
          formatValue={(v) => `$${Math.round(v)}`}
          label="Price"
        />
      </PreviewPanel>

      <PreviewPanel title="Sizes & tone">
        <div className="flex flex-col gap-6">
          <Slider defaultValue={35} size="sm" showValue={false} />
          <Slider defaultValue={55} size="lg" tone="neutral" showValue={false} />
        </div>
      </PreviewPanel>
    </div>
  );
}

// ── Variant examples ──

export default function Demo() {
  return <SliderPreview />;
}