<script>
    export let image_src;
    export let image_alt;
    export let link;
    export let text;
    export let icon_color = '#bcc0c2';
    export let text_color = '#bcc0c2';
</script>

<style>
    div{
        display: flex;
        gap: 0.75em;
        align-items: center;
    }

    div:hover{
        cursor: pointer;
    }

    a{
        color: var(--text-color);
        text-decoration: none;
        font-weight: bold;
    }

    img{
        width: 1.5em;
        height: 1.5em;
        filter: drop-shadow(0 0 0 var(--icon-color));
    }

</style>

<div>
    <img src={image_src} alt={image_alt} style="--icon-color: {icon_color}">
    <a style="--text-color: {text_color}" href={link}>{text}</a>
</div>