<script>
    import useSettings from '$lib/useSettings.svelte.js';
    import {loading} from "$lib/stores.js";

    const settings = useSettings();
    let searchString = $state('');
    const {onsubmit = null} = $props();
    $effect(() => {
        searchString = settings.lastSearch
    });
</script>

<form class="flex flex-row gap-2"
      onsubmit={(e) => {
          e.preventDefault();
          settings.lastSearch = searchString;
          loading.set(true);
          onsubmit?.(searchString, true);
      }}>
    <input class="input py-1 px-2 w-96" type="text" placeholder="Search" bind:value={searchString} />
    <button class="btn btn-md variant-filled" type="submit">Submit</button>
</form>