<script>
  export let block;
  export let onChange;

  let showAdv = false;
  const update = (patch) => onChange({ ...block.data, ...patch });
</script>

<label>Левая кнопка — текст
  <input type="text" value={block.data.leftText ?? ""} on:input={(e) => update({ leftText: e.target.value })} />
</label>
<label>Левая кнопка — ссылка
  <input type="text" value={block.data.leftHref ?? ""} on:input={(e) => update({ leftHref: e.target.value })} />
</label>
<label>Средняя кнопка — текст
  <input type="text" value={block.data.centerText ?? ""} on:input={(e) => update({ centerText: e.target.value })} />
</label>
<label>Средняя кнопка — ссылка
  <input type="text" value={block.data.centerHref ?? ""} on:input={(e) => update({ centerHref: e.target.value })} />
</label>
<label>Правая кнопка — текст
  <input type="text" value={block.data.rightText ?? ""} on:input={(e) => update({ rightText: e.target.value })} />
</label>
<label>Правая кнопка — ссылка
  <input type="text" value={block.data.rightHref ?? ""} on:input={(e) => update({ rightHref: e.target.value })} />
</label>

<label class="inline">
  <input
    type="checkbox"
    checked={block.data.removeBottomSpacing}
    on:change={(e) => update({ removeBottomSpacing: e.target.checked })}
  />
  Убрать отступ после блока
</label>

<div class="advanced-wrapper">
  <button class="btn-advanced-toggle" class:is-open={showAdv} type="button" on:click={() => (showAdv = !showAdv)}>
    Доп. настройки
  </button>
  {#if showAdv}
    <div class="advanced-panel">
      <label>Ширина (px)
        <input
          type="number"
          value={block.data.width ?? 174}
          on:input={(e) => update({ width: parseInt(e.target.value, 10) || 0 })}
        />
      </label>
      <label>Высота (px)
        <input
          type="number"
          value={block.data.height ?? 45}
          on:input={(e) => update({ height: parseInt(e.target.value, 10) || 0 })}
        />
      </label>
      <label>Отступ между кнопками (px)
        <input
          type="number"
          value={block.data.gap ?? 24}
          on:input={(e) => update({ gap: parseInt(e.target.value, 10) || 0 })}
        />
      </label>
      <label>Цвет фона (#hex)
        <input type="text" value={block.data.bgColor ?? "#242424"} on:input={(e) => update({ bgColor: e.target.value })} />
      </label>
      <label>Цвет текста (#hex)
        <input type="text" value={block.data.textColor ?? "#ffffff"} on:input={(e) => update({ textColor: e.target.value })} />
      </label>
      <label>Размер шрифта (px)
        <input
          type="number"
          value={block.data.fontSize ?? 16}
          on:input={(e) => update({ fontSize: parseInt(e.target.value, 10) || 0 })}
        />
      </label>
      <label>
        Отступ снизу (px)
        <input
          type="number"
          value={block.data.bottomSpacing ?? 40}
          on:input={(e) => update({ bottomSpacing: parseInt(e.target.value, 10) || 0 })}
        />
      </label>
    </div>
  {/if}
</div>
