<script>
    import { onMount } from "svelte";
    import flatpickr from "flatpickr";
    import "flatpickr/dist/flatpickr.css";
    import "flatpickr/dist/themes/light.css";

    import { uniqueId } from "lodash";
    export let label;
    export let value;
    let pickerInput;
    let id = uniqueId();

    let flatpickrOptions = {
        enableTime: false,
        allowInput: true,
        dateFormat: "Y-m-d",
        defaultDate: value,
    };

    onMount(() => {
        flatpickr(pickerInput, flatpickrOptions);
    });
</script>

{#if label}
    <div class="d-flex justify-content-between">
        <label for={id} class="form-label">{label}</label>
    </div>
{/if}

<input
    type="text"
    {id}
    class="form-control"
    bind:value
    bind:this={pickerInput}
    autocomplete="off"
/>
