import {
  Canvas,
  Controls,
  Meta,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as TextLinkStories from './TextLink.stories'
import { LifecycleTag } from '../../docs/components/LifecycleTag'

<Meta of={TextLinkStories} />

<Title>TextLink</Title>
<Subtitle>
  Styled text link with optional directional arrow icons. Builds on Link.
</Subtitle>
<LifecycleTag variant="Stable" />
**Component type:** Abstraction over Link

<Canvas of={TextLinkStories.Default} layout="padded" sourceState="shown" />
<Controls of={TextLinkStories.Default} />

## When to use

Use `TextLink` for standard styled inline navigation links. It handles link color, hover state, and optional arrows automatically. Use `Link` when you need full styling control or are building a custom link component.

## Import

```tsx
import { TextLink, TextLinkArrow } from '@chainlink/blocks'
```

## Anatomy

```tsx
<TextLink href="/dashboard">Dashboard</TextLink>
```

## Subcomponents

- `TextLink`: Styled link with optional arrow. Accepts `href`, `external`, `newTab`, `arrow`, `asChild`.
- `TextLinkArrow`: Standalone arrow icon. Use directly only when you need to customize the arrow's color or size beyond what the `arrow` prop on `TextLink` provides.

## Arrow variants

The `arrow` prop adds a directional icon:

- `left` — arrow before the text, for back navigation
- `right` — arrow after the text, for forward navigation
- `external` — expand-window icon after the text, for external links

## Using asChild

```tsx
import NextLink from 'next/link'
;<TextLink href="/path" arrow="right" asChild>
  <NextLink href="/path">Settings</NextLink>
</TextLink>
```

## Examples

### With arrow

<Canvas of={TextLinkStories.WithArrow} layout="padded" sourceState="shown" />

### External with arrow

<Canvas
  of={TextLinkStories.ExternalWithArrow}
  layout="padded"
  sourceState="shown"
/>

### Custom arrow color

<Canvas
  of={TextLinkStories.WithCustomArrowColor}
  layout="padded"
  sourceState="shown"
/>

### With asChild

<Canvas of={TextLinkStories.WithAsChild} layout="padded" sourceState="shown" />

## Related components

- `Link` for unstyled navigation behavior and framework router composition