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

<Meta of={HeaderNavTabsStories} />

<Title>HeaderNavTabs</Title>
<Subtitle>
  A composed navigation tabs component that automatically handles path-to-tab
  mapping and renders links using framework-agnostic link components.
</Subtitle>

<LifecycleTag variant="In Development" />

<Canvas of={HeaderNavTabsStories.Default} sourceState="shown" />
<Controls />

## Import

```tsx
import { HeaderNavTabs } from '@chainlink/blocks'
```

## Usage

### Basic Usage

```tsx
export function MyNavigation() {
  return (
    <HeaderNavTabs
      path="/feeds"
      links={[
        { href: '/', name: 'Home' },
        { href: '/feeds', name: 'Feeds' },
        { href: '/streams', name: 'Streams' },
      ]}
    />
  )
}
```

### With Next.js App Router

```tsx
import { usePathname } from 'next/navigation'
import Link from 'next/link'
import { HeaderNavTabs } from '@chainlink/blocks'

export function MyNavigation() {
  const pathname = usePathname()

  return (
    <HeaderNavTabs
      path={pathname}
      links={[
        { href: '/', name: 'Home' },
        { href: '/feeds', name: 'Feeds' },
        { href: '/streams', name: 'Streams' },
      ]}
      renderLink={({ href, children }) => <Link href={href}>{children}</Link>}
    />
  )
}
```

### With Next.js Page Router

```tsx
import { useRouter } from 'next/router'
import Link from 'next/link'
import { HeaderNavTabs } from '@chainlink/blocks'

export function MyNavigation() {
  const router = useRouter()

  return (
    <HeaderNavTabs
      path={router.asPath}
      links={[
        { href: '/', name: 'Home' },
        { href: '/feeds', name: 'Feeds' },
        { href: '/streams', name: 'Streams' },
      ]}
      renderLink={({ href, children }) => <Link href={href}>{children}</Link>}
    />
  )
}
```

### With React Router

```tsx
import { useLocation } from 'react-router-dom'
import { NavLink } from 'react-router-dom'
import { HeaderNavTabs } from '@chainlink/blocks'

export function MyNavigation() {
  const location = useLocation()

  return (
    <HeaderNavTabs
      path={location.pathname}
      links={[
        { href: '/', name: 'Home' },
        { href: '/feeds', name: 'Feeds' },
        { href: '/streams', name: 'Streams' },
      ]}
      renderLink={({ href, children }) => (
        <NavLink to={href}>{children}</NavLink>
      )}
    />
  )
}
```

## Path Mapping

The component automatically maps paths to tabs using the first segment of the URL:

- `/` → matches tab with `href="/"`
- `/feeds` → matches tab with `href="/feeds"`
- `/feeds/ethereum` → matches tab with `href="/feeds"`
- `/streams/bitcoin` → matches tab with `href="/streams"`

## Examples

### Different Paths

Shows how the component automatically highlights the correct tab based on the current path.

<Canvas of={HeaderNavTabsStories.DifferentPaths} sourceState="shown" />