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

<Meta of={MapLayerPanelStories} />

<Title />
<Subtitle>Shows and hides the named layers of a map.</Subtitle>

<Description />

<Primary />

<Controls />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
>
> - **One array, two components** — pass the same `layers` to `<Map dataLayers>` and to this panel. The panel holds no state; toggle by updating that array's `visible` field.
> - **`dataLayers` is not `layers`** — `<Map layers>` already means Google's native traffic / transit / bicycling overlays. The two never mix.
> - **Join features to a layer with `layerId`** — markers, polygons and circles all accept it, and hiding the layer hides everything that belongs to it.
> - **Order matters with four overlays stacked** — set `zIndex` per layer: heat underneath, areas, lines, points on top.