// @ts-nocheck
import ItButton from "@/components/ui/ItButton.vue";
import type { Meta, StoryObj } from "@storybook/vue3";

const meta: Meta<typeof ItButton> = {
  title: "VBV/Button",
  component: ItButton,
  tags: ["autodocs"],
  render: (args) => ({
    components: { ItButton },
    setup() {
      return { args };
    },
    template: '<ItButton v-bind="args" v-html="args.label"></ItButton>',
  }),
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/file/Svqt2dNY0cF4FCyyiWmitN/vbv-storybook-library?node-id=1-2&t=3AfFOE3SqBxniETT-4",
    },
  },
  argTypes: {
    variant: {
      options: ["primary", "secondary", "blue", "text"],
      control: { type: "select" },
    },
    size: {
      options: ["normal", "large"],
      control: { type: "radio" },
    },
  },
};

export default meta;
type Story = StoryObj<typeof ItButton>;

export const TextButton: Story = {
  args: {
    label: "Hello world",
  },
};

export const ImageLeftButton: Story = {
  args: {
    label: '<it-icon-message class="-ml-1 mr-3 h-5 w-5"></it-icon-message> Hello world',
  },
};

export const ImageRightButton: Story = {
  args: {
    label: 'Hello world <it-icon-message class="ml-3 -mr-1 h-5 w-5"></it-icon-message>',
  },
};

export const ImageLargeRightButton: Story = {
  args: {
    size: "large",
    label: 'Hello world <it-icon-message class="ml-3 -mr-1 h-6 w-6"></it-icon-message>',
  },
};
