<script lang="ts">
    interface Props {
        inputElem?: HTMLInputElement;
        name: string;
        value?: string | null;
        placeholder?: string;
        required?: boolean;
        type?: "text" | "password" | "email" | "number";
    }

    let { inputElem = $bindable(), value = $bindable(), name, ...rest }: Props = $props();
</script>

<input id={name} {name} bind:value bind:this={inputElem} {...rest} />

<style>
    input {
        width: 100%;
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: 2px solid #eaffeb;
        background: none;
        color: #eaffeb;
        font-size: 1rem;
    }

    ::placeholder {
        color: #859a90;
        opacity: 1;
    }

    input:focus {
        border-color: #007bff;
        outline: none;
    }
</style>
