import type { Meta, StoryObj } from '@storybook/react'
import { Link } from './Link'

/** Mock Next.js Link for illustrative purposes */
const NextLink = ({
  children,
  ...props
}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
  <a {...props}>{children}</a>
)

const meta = {
  title: 'Navigation/Link',
  component: Link,
  argTypes: {
    external: { control: 'boolean' },
    newTab: { control: 'boolean' },
    asChild: { control: 'boolean' },
    renderLink: { control: false },
    onClick: { control: false },
  },
  args: {
    href: '/example',
    children: 'Click me',
    external: false,
    newTab: false,
  },
} satisfies Meta<typeof Link>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (_args) => <Link href="/dashboard">Dashboard</Link>,
}

export const ExternalLink: Story = {
  render: (_args) => (
    <Link href="https://chain.link" external newTab>
      Visit Chainlink
    </Link>
  ),
}

export const NewTab: Story = {
  render: (_args) => (
    <Link href="/report.pdf" newTab>
      Open PDF in new tab
    </Link>
  ),
}

export const WithAsChild: Story = {
  render: (_args) => (
    <Link href="/path" asChild>
      <NextLink>Using asChild for Internal Link with Next.js Link</NextLink>
    </Link>
  ),
}