<script lang="ts">
    import type { HTMLInputTypeAttribute } from "svelte/elements";

    interface Props {
        value: any;
        label?: string;
        type?: HTMLInputTypeAttribute;
        readonly?: boolean;
        class?: string;
    }

    let {
        value = $bindable(),
        label,
        type = "text",
        readonly = false,
        class: className
    }: Props = $props();

    const id = crypto.randomUUID();
</script>

<div class="w-full grow">
    {#if label}
        <label for="textfield-{id}" class="">{label}</label>
    {/if}
    <div>
        <input
            {type}
            {readonly}
            name="textfield"
            id="textfield-{id}"
            class="borders mt-2 mb-2 w-full {className}"
            bind:value
        />
    </div>
</div>

<style>
    .borders {
        border: 1px solid black;
        border-radius: 5px;
        display: flex;
        padding: 2px;
    }
</style>
