<script lang="ts">
import type { key_val } from '$lib/stores/ae_stores';

interface Props {
    cfg_json: key_val | null | undefined;
    onsave?: (data: key_val) => void;
}

let { cfg_json = $bindable({}), onsave }: Props = $props();

function save() {
    if (onsave && cfg_json) onsave(cfg_json);
}
</script>

<div class="space-y-4">
    {#if cfg_json}
        <div>
            <label class="label">
                <span>Short Name</span>
                <input
                    type="text"
                    class="input"
                    bind:value={cfg_json.short_name} />
            </label>
        </div>
        <div>
            <label class="label">
                <span>Medium Name</span>
                <input
                    type="text"
                    class="input"
                    bind:value={cfg_json.med_name} />
            </label>
        </div>
    {/if}
    <button type="button" class="btn preset-tonal-primary" onclick={save}
        >Save</button>
</div>
