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

import BarsIcon from "@components/aisera-icons/custom/BarsIcon";
import DetailsIcon from "@components/aisera-icons/custom/DetailsIcon";
import ListIcon from "@components/aisera-icons/custom/ListIcon";
import ToggleButton from "@components/toggle-button/ToggleButton";

const meta = {
  title: "Example/ToggleButton",
  component: ToggleButton,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    color: {
      defaultValue: "primary",
    },
  },
} satisfies Meta<typeof ToggleButton>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    data: [
      {
        label: "Web",
        value: "web",
      },
      {
        label: "Android",
        value: "android",
      },
      {
        label: "Ios",
        value: "ios",
      },
    ],
    value: "ios",
  },
};

export const PreSelect: Story = {
  args: {
    data: [
      {
        label: "Web",
        value: "web",
      },
      {
        label: "Android",
        value: "android",
      },
      {
        label: "Ios",
        value: "ios",
      },
    ],
    value: "web",
    defaultValue: "web",
  },
};

export const Icons: Story = {
  args: {
    data: [
      {
        label: <ListIcon />,
        value: "list",
      },
      {
        label: <DetailsIcon />,
        value: "details",
      },
      {
        label: <BarsIcon />,
        value: "bars",
      },
    ],
    value: "list",
  },
};