import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
import { TextButtonComponent, TextButtonColor, TextButtonSize } from '@isa/ui/buttons';

export type UiTextButtonComponentInputs = {
  color: TextButtonColor;
  size: TextButtonSize;
  disabled: boolean;
  pending: boolean;
};

const meta: Meta<UiTextButtonComponentInputs> = {
  title: 'ui/buttons/TextButton',
  component: TextButtonComponent,
  argTypes: {
    color: {
      control: { type: 'select' },
      options: ['strong', 'subtle'] as TextButtonColor[],
      description: 'Color variation for the text button',
    },
    size: {
      control: { type: 'select' },
      options: ['small', 'medium', 'large'] as TextButtonSize[],
      description: 'Size of the text button',
    },
    disabled: {
      control: 'boolean',
      description: 'Disables the button when true',
    },
    pending: {
      control: 'boolean',
      description: 'Displays a loading state when true',
    },
  },
  args: {
    color: 'subtle',
    size: 'medium',
    disabled: false,
    pending: false,
  },
  render: (args) => ({
    props: args,
    template: `<button uiTextButton ${argsToTemplate(args)}>Button</button>`,
  }),
};

export default meta;

type Story = StoryObj<TextButtonComponent>;

export const Default: Story = {
  args: {},
};

export const StrongSmall: Story = {
  args: {
    color: 'strong',
    size: 'small',
  },
};

export const StrongLarge: Story = {
  args: {
    color: 'strong',
    size: 'large',
  },
};
