<script lang="ts">
  import { createEventDispatcher } from "svelte";
  let input: HTMLInputElement;

  const dispatch = createEventDispatcher();

  export let placeholder = "";
  export let value = "";
  export let disabled = false;

  let focused = false;
  $: dispatch("focusChange", focused);

  function onInput() {
    dispatch("input", value);
  }

  export function focus() {
    input.focus();
  }
</script>

<div class="input" class:focused>
  <slot name="prefix" />
  <input
    bind:this={input}
    {placeholder}
    bind:value
    on:input={onInput}
    on:focus={() => (focused = true)}
    on:blur={() => (focused = false)}
    {disabled}
  />
</div>

<style lang="scss">
  .input {
    display: flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.25em;

    border: 1px solid var(--foreground-lighter);
    border-radius: 4px;
    background: var(--background);

    transition: box-shadow 0.25s;
    &.focused {
      box-shadow: 0 0 2px 3px var(--primary);
    }
  }

  input {
    flex-grow: 1;
    min-width: 0;

    color: var(--foreground);
    background: transparent;
    border: none;

    &:focus {
      outline: none;
    }
  }
</style>
