<script>
    import { Icon } from "sveltestrap";
    import helpers from "@/libs/helpers";

    export let src = "";
    export let alt = "";
    export let title = "";
    export let displayButton = 0;
    export let onRemoveImage = false;

    $: displayRemoveButton = helpers.cleanValues(displayButton).length ? true : false;

    function onRemove(e) {
        e.preventDefault();
        if (onRemoveImage) {
            onRemoveImage();
        }
    }
</script>

<div class="position-relative">
    <img {src} {alt} {title} class="img-thumbnail img-fluid mx-auto position-relative" />
    {#if displayRemoveButton && onRemoveImage}
        <span
            class="position-absolute top-100 start-100 translate-middle badge rounded-pill bg-danger fw-normal px-1 link"
            on:click={(e) => {
                onRemove(e);
            }}><Icon name="x" /></span
        >
    {/if}
</div>

<!--
<img {src} {alt} {title} class="img-thumbnail img-fluid mx-auto d-block" />
{#if displayButton && onRemoveImage}
    <div class="text-right">
        <Button
            class="mt-2 mx-auto"
            size="sm"
            color="danger"
            on:click={(e) => {
                onRemove(e);
            }}><Icon name="x" /></Button
        >
    </div>
{/if}
-->
