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

const meta: Meta<typeof PrimitiveAnchor> = {
  component: PrimitiveAnchor,
  title: 'Primitives/Anchor',
  tags: ['!manifest'],
  args: {
    children: 'Click me',
    href: 'https://example.com',
    onClick: fn(),
    onBlur: fn(),
    onFocus: fn(),
    onKeyDown: fn(),
    onMouseEnter: fn(),
    onMouseLeave: fn(),
  },
};
export default meta;

type Story = StoryObj<typeof PrimitiveAnchor>;

export const Basic: Story = {};

export const WithLongName: Story = {
  args: {
    children: 'Anchor 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 WithTargetBlank: Story = {
  args: {
    target: '_blank',
  },
};

export const WithRelNoopener: Story = {
  args: {
    rel: 'noopener noreferrer',
  },
};

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

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