---
/* ---------------------------------------------------------------------------
 * MultiTextField — N text inputs with add/remove, used for pulse options.
 *
 * Submits as repeated form values under field.key. Initial input count is
 * Math.max(minItems, value.length). Add/remove buttons are managed by a
 * small client script attached to the panel.
 * ------------------------------------------------------------------------- */

import type { MultiTextField } from '../../resource-types';

interface Props {
  field: MultiTextField;
  value: unknown;
}

const { field, value } = Astro.props;
const min = field.minItems ?? 1;
const max = field.maxItems ?? 10;

const initialValues: string[] = Array.isArray(value)
  ? value.map((v) => (v == null ? '' : String(v)))
  : [];
const initialCount = Math.max(min, initialValues.length, 1);
while (initialValues.length < initialCount) initialValues.push('');
---

<div
  class="bs-multitext"
  data-multitext={field.key}
  data-min={min}
  data-max={max}
>
  <div class="bs-multitext-rows">
    {initialValues.map((v, i) => (
      <div class="bs-multitext-row">
        <input
          type="text"
          name={field.key}
          class="bs-input"
          value={v}
          placeholder={field.placeholderEach ?? `Option ${i + 1}`}
        />
        <button
          type="button"
          class="bs-multitext-remove"
          aria-label="Remove option"
        >×</button>
      </div>
    ))}
  </div>
  <button type="button" class="bs-multitext-add">+ Add option</button>
</div>
