import React, { useState } from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { Slider } from "../ui-components/Slider";
import { SliderInfo } from "../ui-components/Slider/SliderInfo";

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

const Template: ComponentStory<typeof Slider> = (args) => {
  return (
    <div style={{ marginLeft: "30px" }}>
      <Slider {...args} />
    </div>
  );
};

const InfoTemplate: ComponentStory<typeof Slider> = () => {
  return (
    <>
      <SliderInfo />
      <div style={{ marginLeft: "30px" }}>
      <Slider
        {...{
          min: 1,
          max: 5,
          defaultValue: 3,
          step: 1,
          marks: { 1: "Tech-driven", 3: " ", 5: "Vet-driven" },
        }}
      />
      </div>
    </>
  );
};

export const SliderDetails = InfoTemplate.bind({});

export const DefaultSlider = Template.bind({});
DefaultSlider.args = {
  min: 1,
  max: 5,
  defaultValue: 3,
  step: 1,
  marks: { 1: "Tech-driven", 3: " ", 5: "Vet-driven" },
};
