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

<Meta of={PageNotFoundStories} />

<Title>PageNotFound</Title>
<Subtitle>
  404 screen with animated cube and glitched text. Uses Typography and Button
  primitives.
</Subtitle>

<LifecycleTag variant="In Development" />
**Component type:** Full-page screen

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

## When to use

Use `PageNotFound` for app-level 404 routes that should use the standard
Chainlink Blocks empty-state artwork and return action.

Use a custom page when the route needs product-specific recovery actions,
diagnostics, or navigation beyond a single return link.

## Import

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

## Anatomy

```tsx
<PageNotFound />
```

## Examples

### Custom link

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

export function NotFoundWithCustomLink() {
  return (
    <PageNotFound
      customLink={
        <Button variant="secondary" asChild>
          <a href="/dashboard">Back to dashboard</a>
        </Button>
      }
    />
  )
}
```

<Canvas of={PageNotFoundStories.WithCustomLink} sourceState="shown" />

## Related components

- `Button` for custom return actions
- `PageHeader` for normal page-level titles and navigation