<script>
    import Icon from './Icon.svelte';

    export let value = '';
    export let placeholder = '';
    export let autofocus = false;
    export let show = false;
    let classes = '';
    export {classes as class};

    let input;

    export function focus() {
        input.focus();
    }
</script>


<style>
    button {
        border: 1px solid oklch(var(--bc) / 0.2);
        border-left: none;
    }
</style>


<div class="join w-full has-[:focus]:outline outline-2 outline-offset-2 outline-base-content/20">
    <input
        bind:this={input}
        type={show ? 'text' : 'password'}
        {value} {placeholder} {autofocus}
        on:input={e => value = e.target.value}
        on:input on:change on:focus on:blur
        class="input input-bordered flex-grow join-item placeholder:text-gray-500 focus:outline-none {classes}"
    />

    <button
        type="button"
        class="btn btn-ghost join-item swap swap-rotate"
        class:swap-active={show}
        on:click={() => show = !show}
    >
        <Icon
            name="eye"
            class="w-5 h-5 swap-off"
        />
        <Icon
            name="eye-slash"
            class="w-5 h-5 swap-on"
        />
    </button>
</div>
