<script lang="ts">
    export let logo:string;
    export let logoWidths: string = "35%";
    
    export let fontSize: string = "3mm";
    export let lineHeight: string = "3.1mm";

    import { onMount } from "svelte";
    onMount(() => {
        imageCaption = logo.split(/(\\|\/)/g).pop();
    });

    let imageCaption: undefined | string; // Not a high piority, you get the file name and thats it
</script>

<div class="container">
    <img src={logo} alt="{imageCaption}" width="{logoWidths}"/>
    <div style="line-height: {lineHeight};">
        <span style="font-size: {fontSize};">
            <slot/>
        </span>
    </div>
</div>

<style lang="scss">
    .container {
        width: 100%;

        & > div {
            margin-top: 2mm;
            padding-left: 2mm;
            padding-bottom: 1mm;

            text-align: start;

            border-left: 0.5mm solid black;
        }

        & > img {
            border-radius: 2.5mm;
            filter: drop-shadow(1mm 1mm 1mm #0000009d);
        }
    }
</style>