<script lang="ts">
    import { apiBaseURL } from "../../config"

    export let collectionName: string = null
    export let entryId: string = null
    export let file: File = null
    export let alt: string = ""
    export let cssClass: string = ""
</script>

{#if collectionName && entryId && file}
    {#if file?.src?.includes(";base64,")}
        <img src="{file.src}" alt="{alt ? alt + ' - ' : ''}{file.path}" class="{cssClass}" />
    {:else}
        <img
            src="{`${apiBaseURL}${collectionName}/${entryId}/${file.src}?filter=l`}"
            alt="{alt ? alt : file.path}"
            class="{cssClass}"
        />
    {/if}
{/if}

<!-- <picture>
    <source
        media="(min-width: 1400px)"
        data-srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
        srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
    />
    <source
        media="(min-width: 768px)"
        data-srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
        srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
    />
    <source
        media="(min-width: 400px)"
        data-srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
        srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3.jpg"
    />
    <source
        data-srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3-400x267.jpg"
        srcset="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3-400x267.jpg"
    />
    <img
        data-src="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3-400x267.jpg"
        alt="fresh IT GmbH"
        src="https://www.framos-holding.de/wp-content/uploads/2020/09/fresh-IT-3-400x267.jpg"
    />
</picture> -->
