import { type ComponentPropsWithoutRef } from 'react';
import { Slider as RSlider } from 'radix-ui';

export const Slider = (props: ComponentPropsWithoutRef<typeof RSlider.Root>) => (
  <RSlider.Root className="modern-sk-slider" {...props}>
    <RSlider.Track className="modern-sk-slider__track">
      <RSlider.Range className="modern-sk-slider__range" />
    </RSlider.Track>
    <RSlider.Thumb className="modern-sk-slider__thumb" aria-label="Value" />
  </RSlider.Root>
);

export const Stepper = ({
  onDecrement,
  onIncrement,
}: {
  onDecrement: () => void;
  onIncrement: () => void;
}) => (
  <div className="modern-sk-stepper">
    <button type="button" onClick={onDecrement} aria-label="Decrease">
      −
    </button>
    <button type="button" onClick={onIncrement} aria-label="Increase">
      +
    </button>
  </div>
);