<script lang="ts">
    let { 
      image = $bindable(''),
      edit = $bindable(true)
    } = $props()
    
    let fileinput: HTMLInputElement
    
    const onFileSelected =(e)=>{
        let img = e.target.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(img);
        reader.onload = e => {
            image = e.target.result as string
        };
    }
    
</script>

<div class="mb-4 w-full">
    {#if edit && image}
        <button id="img-upload-button" onclick={() => fileinput.click()}>
            <img class="rounded-2xl hover:brightness-50 transition-opacity w-full h-full object-cover" src={image} alt="" />
        </button>
    {:else if edit}
        <button id="img-upload-button" onclick={() => fileinput.click()}>
            Select Image
        </button>
    {:else if image}
        <img class="rounded-2xl w-full h-full object-cover" src={image} alt="" />
    {:else}
        <div class="rounded-2xl h-50 bg-white/10 text-center">No Image</div>
    {/if}

    <input style="display:none" type="file" accept=".jpg, .jpeg, .png" onchange={(e)=>onFileSelected(e)} bind:this={fileinput} >

</div>

<style>
    @import 'tailwindcss';
    
    #img-upload-button {
        @apply text-center bg-white/30 h-60 w-full rounded-2xl block hover:text-white/30 transition-all;
    }
</style>