<script>
    import Facebook from "svelte-material-icons/Facebook.svelte"
    import Twitter from "svelte-material-icons/Twitter.svelte"
    import Instagram from "svelte-material-icons/Instagram.svelte"
    import Youtube from "svelte-material-icons/Youtube.svelte"


    export let text = 'Share this Article';
    export let link = '/';

</script>

<div class="border border-white rounded-full flex flex-row items-center px-2  space-x-4 h-8">

    <span class="uppercase text-white font-bold mt-1">{text}:</span>

    <div class="flex flex-row space-x-1 items-center">
        <a href="{link}">
            <Facebook color="white" size="26"/>
        </a>
        <a href="{link}">
            <Twitter color="white" size="26"/>
        </a>
        <a href="{link}">
            <Instagram color="white" size="26"/>
        </a>
        <a href="{link}">
            <Youtube color="white" size="26"/>
        </a>
    </div>

</div>