import type { Meta, StoryObj } from '@storybook/react';
import Button from '../index.js';
import { ButtonAsLinkProps } from '../types.js';
import { withButtonStyles } from './ButtonDecorator.js';
import { SBContainer, SBFocusWrapper } from '@sb-utils';

const meta: Meta<ButtonAsLinkProps> = {
  title: 'Component Library/Button/As Link',
  component: Button,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: `The Button component with buttonType="link" renders as an \`<a>\` element for navigation without requiring JavaScript.`,
      },
    },
  },
  args: {
    buttonType: 'link',
  },
  decorators: [withButtonStyles],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    variant: 'primaryButton',
    children: 'Click me',
    href: 'https://www.hubspot.com',
  },
};

export const WithIcon: Story = {
  args: {
    variant: 'primaryButton',
    children: 'Click me',
    href: 'https://www.hubspot.com',
    showIcon: true,
    iconFieldPath: 'icon',
    iconPosition: 'right',
  },
};

export const LinkTargets: Story = {
  name: 'Link Targets',
  render: () => (
    <SBContainer flex direction="column" gap="medium">
      <SBContainer addBackground>
        <h4>Same Window (_self)</h4>
        <Button buttonType="link" href="https://www.hubspot.com" target="_self">
          Open in same window
        </Button>
      </SBContainer>

      <SBContainer addBackground>
        <h4>New Window (_blank)</h4>
        <Button
          buttonType="link"
          href="https://www.hubspot.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Open in new window
        </Button>
      </SBContainer>
    </SBContainer>
  ),
};

export const InteractionStates: Story = {
  name: 'Interaction States',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Hover State</h4>
        <p>Hover over the button to see the hover effect</p>
        <Button
          buttonType="link"
          href="https://www.hubspot.com"
          variant="primary"
        >
          Hover me
        </Button>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Focus State</h4>
        <p>
          In production, this focus outline appears when navigating with the
          keyboard (Tab key). This Storybook demo auto-applies the focus state
          to show how it looks.
        </p>
        <SBFocusWrapper>
          <Button
            buttonType="link"
            href="https://www.hubspot.com"
            variant="primary"
          >
            Focused button
          </Button>
        </SBFocusWrapper>
      </SBContainer>
    </SBContainer>
  ),
};
