import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';
import PrimitiveButton from '..';

const meta: Meta<typeof PrimitiveButton> = {
  component: PrimitiveButton,
  title: 'Primitives/Button',
  tags: ['!manifest'],
  args: {
    children: 'Button text',
    onClick: fn(),
    onBlur: fn(),
    onFocus: fn(),
    onKeyDown: fn(),
    onMouseEnter: fn(),
    onMouseLeave: fn(),
  },
};
export default meta;

type Story = StoryObj<typeof PrimitiveButton>;

export const Basic: Story = {};

export const WithLongName: Story = {
  args: {
    children: 'Button with a really long name',
  },
};

export const WithCustomClass: Story = {
  args: {
    className: 'custom-class',
  },
  decorators: [
    (Story) => (
      <div>
        <style>
          {`
            .custom-class {
              background-color: red;
              color: white;
              border: 2px solid black;
              padding: 10px 20px;
              font-size: 16px;
            }
          `}
        </style>
        <Story />
      </div>
    ),
  ],
};

export const WithCustomStyle: Story = {
  args: {
    style: { color: 'red' },
  },
};

export const Loading: Story = {
  args: {
    loading: true,
  },
  render: (args) => (
    <PrimitiveButton {...args}>{args.loading ? 'Loading...' : 'Button text'}</PrimitiveButton>
  ),
};

export const Disabled: Story = {
  args: {
    disabled: true,
  },
};