import { ComponentStory, ComponentMeta } from "@storybook/react";
import Slider from './Slider';
import {Center} from 'native-base';

export default {
  title: "App/Forms/Slider",
  component: Slider,
  argsTypes: {
    colorScheme: {
      control: {
        type: 'select', 
        options: ['primary', 'secondary', 'emerald', 'rose']
      }, 
      description: "primary | secondary | emerald | rose"
    },
  }

} as ComponentMeta<typeof Slider>;

const Template: ComponentStory<typeof Slider> = (args) => {
  return (
    <Center alignItems="center" w="100%" maxW="200px">
      <Slider {...args} />
    </Center>
  )
};

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

Primary.args = {
  colorScheme: "primary",
  w: "3/4",
  maxW: "400px",
  minValue: 0,
  maxValue: 100,
  defaultValue: 30,
  step: 20,
  accessibilityLabel: "Primary"
};

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

Secondary.args = {
  colorScheme: "emerald",
  w: "3/4",
  maxW: "200px",
  defaultValue: 80,
  step: 10,
  accessibilityLabel: "Secondary"
};