import * as React from "react";
import type { ComponentStory, ComponentMeta } from "@storybook/react";
import { Slider } from "../src";
import { useState } from "react";

export default {
  title: "lib/Slider",
  component: Slider
} as ComponentMeta<typeof Slider>;

const Template: ComponentStory<typeof Slider> = args => {
  const [value, setValue] = useState(35);

  return (
    <div style={{ height: "50px", width: "100%" }}>
      <Slider
        {...args}
        sliderValue={value}
        onSliderChange={s => {
          console.log("s", s);
          setValue(s);
        }}
      />
    </div>
  );
};

export const Normal = Template.bind({});

export const WithStyles = Template.bind({});
WithStyles.args = {
  style: {
    height: 100,
    paddingTop: 30,
    width: 300
  }
};