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

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { Button } from "../button/button";
import { ButtonGroup } from "./button-group";

const meta = {
  title: "UI/Button Group",
  component: ButtonGroup,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof ButtonGroup>;

export default meta;

type Story = StoryObj<typeof ButtonGroup>;

export const DefaultButtonGroup: Story = {
  render: () => (
    <ButtonGroup>
      <Button variant="outline">Text</Button>
      <Button variant="outline">Text</Button>
      <Button variant="outline">Text</Button>
    </ButtonGroup>
  ),
};
export const IconButtonGroup: Story = {
  render: () => (
    <ButtonGroup>
      <Button
        variant="outline"
        leftIcon={{
          name: "ArrowLeft",
        }}
      />
      <Button variant="outline">Text</Button>
      <Button
        variant="outline"
        rightIcon={{
          name: "ArrowRight",
        }}
      />
    </ButtonGroup>
  ),
};
export const TextWithIconButtonGroup: Story = {
  render: () => (
    <ButtonGroup>
      <Button
        variant="outline"
        leftIcon={{
          name: "Circle",
        }}
      >
        Text
      </Button>
      <Button
        variant="outline"
        leftIcon={{
          name: "Circle",
        }}
      >
        Text
      </Button>
      <Button
        variant="outline"
        leftIcon={{
          name: "Circle",
        }}
      >
        Text
      </Button>
      <Button
        variant="outline"
        leftIcon={{
          name: "Circle",
        }}
      >
        Text
      </Button>
      <Button
        variant="outline"
        leftIcon={{
          name: "Circle",
        }}
      >
        Text
      </Button>
      <Button
        variant="outline"
        leftIcon={{
          name: "Circle",
        }}
      >
        Text
      </Button>
      <Button
        variant="outline"
        leftIcon={{
          name: "Circle",
        }}
      >
        Text
      </Button>
    </ButtonGroup>
  ),
};