import type { Meta, StoryObj } from "@storybook/react";

import { Button } from "@components/Button/Button";
import AddCircleIcon from "@components/aisera-icons/custom/AddCircleIcon";

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
  title: "Example/Button",
  component: Button,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: "centered",
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
  tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    color: {
      defaultValue: "primary",
    },
  },
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary: Story = {
  args: {
    label: "Primary",
    variant: "contained",
  },
};

export const PrimaryStartIcon: Story = {
  args: {
    label: "Primary With Icon",
    variant: "contained",
    startIcon: <AddCircleIcon />
  },
};

export const PrimaryIcon: Story = {
  args: {
    variant: "contained",
    startIcon: <AddCircleIcon />
  },
};

export const PrimaryEndIcon: Story = {
  args: {
    label: "Primary With Icon",
    variant: "contained",
    endIcon: <AddCircleIcon />
  },
};

export const Secondary: Story = {
  args: {
    label: "Secondary",
    variant: "outlined",
  },
};

export const SecondaryStartIcon: Story = {
  args: {
    label: "Secondary With Icon",
    variant: "outlined",
    startIcon: <AddCircleIcon />
  },
};

export const SecondaryIcon: Story = {
  args: {
    variant: "outlined",
    startIcon: <AddCircleIcon />
  },
};

export const SecondaryEndIcon: Story = {
  args: {
    label: "Secondary With Icon",
    variant: "outlined",
    endIcon: <AddCircleIcon />
  },
};

export const Tertiary: Story = {
  args: {
    label: "Tertiary",
  },
};

export const TertiaryStartIcon: Story = {
  args: {
    label: "Tertiary With Icon",
    startIcon: <AddCircleIcon />
  },
};

export const TertiaryIcon: Story = {
  args: {
    startIcon: <AddCircleIcon />
  },
};

export const TertiaryEndIcon: Story = {
  args: {
    label: "Tertiary With Icon",
    endIcon: <AddCircleIcon />
  },
};

// export const Warning: Story = {
//   args: {
//     color: "warning",
//     variant: "contained",
//     label: "Delete now",
//   },
// };

// export const Success: Story = {
//   args: {
//     color: "success",
//     variant: "contained",
//     label: "Logged In",
//   },
// };

// export const Error: Story = {
//   args: {
//     color: "error",
//     label: "Are you sure ?",
//     variant: "outlined",
//   },
// };