// CDN build: `ApexMaps` is a global (see index.html). With a bundler:
//   import ApexMaps from 'apexmaps'

// Theming and responsive behaviour on one map. `theme.mode` is 'light', 'dark'
// or 'auto' ('auto' follows prefers-color-scheme). Beyond the mode, every piece
// of chrome reads from --apexmaps-* custom properties on the container, so brand
// styling needs no options at all. For example, set on #map in your CSS:
//
//   #map {
//     --apexmaps-fg: #f8fafc;
//     --apexmaps-surface: #1e1b4b;
//     --apexmaps-border: rgba(255, 255, 255, 0.24);
//     --apexmaps-focus: #f472b6;
//     --apexmaps-radius: 2px;
//     --apexmaps-font-size: 13px;
//   }
const data = [
  { key: 'DE', value: 82 },
  { key: 'FR', value: 74 },
  { key: 'IT', value: 61 },
  { key: 'ES', value: 58 },
  { key: 'PL', value: 47 },
  { key: 'NL', value: 88 },
  { key: 'SE', value: 79 },
  { key: 'IE', value: 66 },
  { key: 'PT', value: 44 },
  { key: 'EL', value: 39 },
  { key: 'FI', value: 71 },
  { key: 'AT', value: 63 },
  { key: 'BE', value: 69 },
]

const map = new ApexMaps(document.getElementById('map'), {
  chart: { width: '100%', height: 320 },
  geo: { map: 'eu/nuts0@20m' },
  series: [{ name: 'Adoption', joinBy: ['nuts_id', 'key'], data, scale: { palette: 'blues' } }],
  theme: { mode: 'light' },
  dataLabels: { enabled: true },
  // Responsive rules match on the measured container width, narrowest matching
  // breakpoint winning, so they can be declared in any order. The map keeps the
  // reader's position across a resize rather than refitting.
  responsive: [
    { breakpoint: 560, options: { legend: { position: 'bottom' }, dataLabels: { enabled: false } } },
    { breakpoint: 900, options: { legend: { position: 'right' } } },
  ],
})
map.render()

// Flip the mode at runtime the same way the demo's buttons do:
//   map.updateOptions({ theme: { mode: 'dark' } })