---
/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : src/components/Customizer.astro
 * Desc   : Auto-generated controls from frontmatter — live preview + code rewrite
 * ============================================================
 */
interface Control {
  var: string;
  label: string;
  type: 'color' | 'range';
  default: string | number;
  min?: number;
  max?: number;
  step?: number;
  unit?: string;
}

interface Props {
  controls: Control[];
}

const { controls } = Astro.props;
const cssValue = (c: Control) => `${c.default}${c.unit ?? ''}`;
---

<div class="sg-panel">
  <div class="sg-panel-bar"><strong>Customize</strong><span>updates preview, code &amp; clipboard</span></div>
  <form class="sg-customizer" data-sg-customizer>
    {
      controls.map((c, i) => (
        <div class="sg-control">
          <label for={`sg-ctl-${i}`}>{c.label}</label>
          <output for={`sg-ctl-${i}`}>{cssValue(c)}</output>
          {c.type === 'color' ? (
            <input
              type="color"
              id={`sg-ctl-${i}`}
              value={String(c.default)}
              data-var={c.var}
              data-default={String(c.default)}
              data-unit=""
            />
          ) : (
            <input
              type="range"
              id={`sg-ctl-${i}`}
              min={c.min}
              max={c.max}
              step={c.step ?? 1}
              value={String(c.default)}
              data-var={c.var}
              data-default={String(c.default)}
              data-unit={c.unit ?? ''}
            />
          )}
        </div>
      ))
    }
    <div class="sg-customizer-actions">
      <button class="sg-btn sg-btn-sm" type="reset" data-sg-reset>Reset defaults</button>
    </div>
  </form>
</div>