import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import {SelectItem, SelectGroup } from "./Select";
import {Center} from 'native-base';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "App/Forms/Select",
  component: SelectGroup,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    color: { control: "color" },
    variant: { control: 'select', options: ["outline", "filled", "underlined", "unstyled", "rounded"]},
    _item: { colorScheme: {control: "color"} },
  },
} as ComponentMeta<typeof SelectGroup>;

export const Template: ComponentStory<typeof SelectGroup> = (args) => (
  <Center>
    <SelectGroup {...args} placeholder="Choose an option">
      <SelectItem  value="one" label="First Value"/>
      <SelectItem  value="two" label="Second Value"/>
    </SelectGroup>
  </Center>
);

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

Primary.args = {
  backgroundColor: "rose.100",
  borderColor: "guille.red"
}