---
// "Less -> More" gradient legend, e.g. for a choropleth map's color scale.
interface Props {
  /** number of swatches */
  steps?: number
  /** theme color the swatches ramp up to, e.g. 'primary' */
  color?: string
  minLabel?: string
  maxLabel?: string
  class?: string
}

const { steps = 10, color = 'primary', minLabel = 'Less', maxLabel = 'More', class: className } = Astro.props

const items = Array.from({ length: steps }, (_, i) => i + 1)
---

<div class:list={['d-flex align-items-center gap-2', className]}>
  <div class="text-secondary">{minLabel}</div>
  <div class="d-flex gap-1">
    {items.map((step) => <span class="legend" style={`background: color-mix(in srgb, transparent, var(--tblr-${color}) ${(step / steps) * 100}%);`} />)}
  </div>
  <div class="text-secondary">{maxLabel}</div>
</div>