import {
  Meta,
  Title,
  Subtitle,
  Description,
  Primary,
  Controls,
  Stories,
} from '@storybook/addon-docs/blocks';
import * as MapOverlayStories from './map-overlay.stories';

<Meta of={MapOverlayStories} />

<Title />
<Subtitle>Anchors React content over the map surface.</Subtitle>

<Description />

<Primary />

<Controls />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
>
> - **Place these as children of `<Map>`** — that is what gives them a positioned container and the shared stacking layer.
> - **One overlay per anchor.** Two at the same position sit on top of each other.
> - **Keep overlays small.** They cover the map they annotate.
> - Prefer the built-in props (`<Map scaleBar>`, `<Map attribution>`) over hand-placing those two — the map already knows where they belong.