<script lang="ts">
  export let label = '';
  export let placeholder = '';
  export let value: string | number = '';
  export let type = 'text';

  function handleInput(event: Event): void {
    const { value: inputVal } = event.target as HTMLInputElement;
    if (type === 'number') {
      value = inputVal === '' ? 0 : +inputVal;
    } else {
      value = inputVal;
    }
  }
</script>

{#if label}
  <label class="input {$$restProps.class || ''}">
    <span>{label}</span>
    <input {type} value={value || ''} on:input={handleInput} />
  </label>
{:else}
  <input
    class="input {$$restProps.class || ''}"
    {type}
    {placeholder}
    value={value === 0 ? '' : value}
    on:input={handleInput}
  />
{/if}

<style lang="scss">
  label, input {
    display: block;
  }
</style>

{#each surveys as survey}
  {#if survey.type === 'text'}
    <input bind:value={survey.value} />
  {:else if survey.type === 'number'}
    <input type="number" bind:value={survey.value} />
  {/if}
{/each}