import React, { useState } from "react";
import { Meta, StoryFn } from "@storybook/react";
import { Slider } from "../ui/slider";

export default {
  title: "Components/Slider",
  component: Slider,
  argTypes: {
    tooltip: { control: "boolean" },
    tooltip_direction: {
      control: { type: "select" },
      options: ["top", "bottom"],
    },
  },
} as Meta<typeof Slider>;

export const DefaultSlider: StoryFn<typeof Slider> = (args) => {
  const [value, setValue] = useState(30); // Single number instead of array

  return (
    <Slider className="m-24" {...args} value={value} onValueChange={setValue} />
  );
};

DefaultSlider.args = {
  tooltip: true,
  tooltip_direction: "top",
};