---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Map from '@components/demo/Map.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import maps from '@data/maps.json'
import CardTitle from '@ui/CardTitle.astro'
import DocsLink from '@ui/DocsLink.astro'

type MapData = { title?: string; card?: boolean }
const mapEntries = Object.entries(maps as Record<string, MapData>)
---

<DefaultLayout title="Maps" pageMenu="plugins.maps" pageLibs={['mapbox']} description="Interactive Mapbox maps — plain, styled, or full-card with custom markers.">
  <DocsLink slot="page-header-actions" path="/ui/components/map" />
  <div class="row row-cards">
    {
      mapEntries.map(([mapId, data]) =>
        data.card ? (
          <div class="col-lg-12">
            <Card>
              <Map mapId={mapId} ratio="21x9" />
            </Card>
          </div>
        ) : (
          <div class="col-lg-6">
            <Card>
              <CardBody>
                <CardTitle>{data.title}</CardTitle>
                <Map mapId={mapId} />
              </CardBody>
            </Card>
          </div>
        ),
      )
    }
  </div>
</DefaultLayout>