<script>
  import Cleave from "cleave.js";
  import { onMount } from "svelte";

  export let error;
  // export let label;
  export let value;
  export let length = 6;

  let input;
  onMount(() => {
    const cleaveCustom = new Cleave(input, {
      blocks: [length / 2, length / 2],
      delimiter: " ",
      numericOnly: true,
    });
  });
</script>

<style>
  .error {
    color: var(--error);
    margin-top: 4px;
  }
</style>

<div class="floating group">
  <input id="noasidhglk" bind:this={input} autofocus bind:value />
  <span class="highlight" />
  <span class="bar" />
  <label for="noasidhglk">Code</label>
  <div class="error" style={!error ? 'display: none;' : ''}>{error}</div>
</div>
