import {ComponentMeta, ComponentStory} from "@storybook/react";
import React, { useState } from "react";
import {Slider} from "../Starship";
import "../Styles/index.scss";

export default {
    title: "Example/Slider",
    component: Slider,

    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
} as ComponentMeta<typeof Slider>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Slider> = args => {
    const [val, setVal] = useState(1)
    const marks = {
        0: "0",
        1: "1",
        2: "2",
        3: "3",
        4: "4",
        5: "5",
    };
    return (
        <>   
            <Slider tooltip={{open: true} } marks={marks} value={val} onChange={(v) => setVal(v)} min={0} max={5} />
        </>
    );
};

export const StarshipSlider = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
StarshipSlider.args = {title: "Starship Slider"};