import { commonProps } from "../../utils/storybook";
import { Icons } from "../icons";
import { ICON_SIZES } from "../icons/withSharedIconProps";
import { LinkIconButton } from ".";

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

const meta: Meta<typeof LinkIconButton> = {
  title: "LinkIconButton",
  component: LinkIconButton,
  tags: ["autodocs"],
  args: {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    Icon: "Close" as any,
  },
  argTypes: {
    Icon: {
      options: Object.keys(Icons),
    },
    variant: {
      description: "Sets the display variant of the button.",
      options: ["primary", "secondary", "ghost"],
      table: {
        type: { summary: `primary | secondary | ghost | unstyled` },
        defaultValue: { summary: "primary" },
      },
    },
    size: {
      description: "Sets the size of the button.",
      options: Object.keys(ICON_SIZES),
      table: {
        type: { summary: `s | m | l` },
        defaultValue: { summary: "m" },
      },
    },
    ...commonProps,
  },
};

export default meta;

type Story = StoryObj<typeof LinkIconButton>;

/**
 * Pass the icon as a `React.FC<IconProps>` and the button will handle its appearance based on button variant and size.
 */
export const IconAsFunction: Story = {
  render: ({ Icon, ...args }) => (
    <LinkIconButton {...args} Icon={Icons[Icon as unknown as keyof typeof Icons]} />
  ),
};

/**
 * If full control over icon appearance is needed such as control of its color, pass it as an element.
 */
export const IconAsElement: Story = {
  render: ({ ...args }) => <LinkIconButton {...args} Icon={<Icons.Close color="$light-red" />} />,
};