import React, { Children } from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Button } from "../components/Button/Button";
import { SVGBookmark } from "../components/icons";

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

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const High = Template.bind({});
High.args = {
  emphasis: "high",
  children: (
    <Button.Icon className="w-8">
      <SVGBookmark />
    </Button.Icon>
  ),
};

export const Medium = Template.bind({});
Medium.args = {
  emphasis: "medium",
  children: (
    <Button.Icon>
      <SVGBookmark className="w-8" />
    </Button.Icon>
  ),
};

export const Low = Template.bind({});
Low.args = {
  emphasis: "low",
  children: (
    <Button.Icon>
      <SVGBookmark className="w-8" />
    </Button.Icon>
  ),
};
