Slider

'use client';

import * as React from 'react';
import { Slider } from './slider';
import type { SliderValue } from './slider-variants';

const VOLUME_STEPS = [20, 30, 40, 50, 60, 70];
const money = (value: number) => `$${value}`;
const percent = (value: number) => `${value}%`;

function Field({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-3">
      <p className="text-sm font-medium text-secondary">{title}</p>
      {children}
    </div>
  );
}

export default function SliderDemo({ replay = 0 }: { replay?: number }) {
  const [volume, setVolume] = React.useState<SliderValue>(40);
  const [price, setPrice] = React.useState<SliderValue>([20, 80]);

  React.useEffect(() => {
    if (replay === 0) return;
    const timers: number[] = [];
    const at = (ms: number, run: () => void) => timers.push(window.setTimeout(run, ms));
    setVolume(VOLUME_STEPS[0] ?? 20);
    setPrice([20, 80]);
    VOLUME_STEPS.slice(1).forEach((value, index) => {
      at(400 + index * 180, () => setVolume(value));
    });
    at(1500, () => setPrice([30, 70]));
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <Field title="Volume">
        <Slider
          aria-label="Volume"
          label="top-floating"
          format={percent}
          value={volume}
          onValueChange={setVolume}
        />
      </Field>
      <Field title="Price">
        <Slider
          aria-label="Price"
          label="bottom"
          format={money}
          minStepsBetweenThumbs={10}
          value={price}
          onValueChange={setPrice}
        />
      </Field>
      <Field title="Brightness">
        <Slider aria-label="Brightness" defaultValue={60} format={percent} disabled />
      </Field>
    </div>
  );
}