<script lang="ts">
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  export let placeholder = "";
  export let value = "";

  let focused = false;
  $: dispatch("focusChange", focused);
</script>

<div class="input" class:focused>
  <slot name="prefix" />
  <input
    {placeholder}
    bind:value
    on:input
    on:focus={() => (focused = true)}
    on:blur={() => (focused = false)}
  />
</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;

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

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