<script>
    import MobileTags from "./MobileTags.svelte";
    import NameAndTag from "./NameAndTag.svelte";

    export let isMobile = false;
    export let name = "";
    export let tags = ["null"];
    export let isSnorre = false;

    // Shit code but who cares, if it works /shrug
</script>


<div class="bg-grid-200 border-2 border-base-300 pl-1 pr-4 rounded cozette max-lg:pb-2">
{#if !isSnorre}
    <div class="developersProfile {isSnorre ? "isSnorre" : ""} pl-1 font-mono">
        <NameAndTag name={name} tags={tags} isMobile={isMobile}/>
        <slot/>
        <MobileTags tags={tags} isMobile={isMobile}/>
    </div>
{:else}
    <div class="w-full pl-1">
        <div class="developersProfile absolute snorre pl-4 font-mono pointer-events-none select-none">
            <pre style="font-size: {!isMobile ? 1.5 : 1.5}rem;"> </pre>
            <span>
                <pre> </pre>
                <pre> </pre>
            </span>
            {#if isMobile}
                <pre> </pre>
            {/if}
        </div>
        <div class="developersProfile snorre-overlay relative pl-1 font-mono">
            <NameAndTag name="Snorre" tags={tags} isMobile={isMobile}/>
            <span>
                <p>I'm the diversity hire. (Gay)</p>
                <!-- <p><a href="https://www.linkedin.com/in/snorrealtschul/" target="_blank" style="color:lightblue;">My website</a></p> -->
                <p><a href="https://spoodythe.one/" target="_blank" style="color:lightblue;">My website</a></p>
            </span>
            <MobileTags tags={tags} isMobile={isMobile}/>
        </div>
    </div>
{/if}
</div>

<style>
    .developersProfile:not(.snorre):not(.snorre-overlay){
        /* background-image: linear-gradient(var(--color-neutral) 33%, rgba(255,255,255,0) 0%); */
        /* background-image: linear-gradient(var(--color-neutral) 100%);
        background-position: left;
        background-size: 0.1rem 0.5rem;
        background-repeat: repeat-y; */
    }

    .snorre {
        /* border-left: dashed transparent 0.1rem;
        border-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
        border-image-slice: 1; */
    }

    .snorre-overlay {
        /* background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, var(--color-base-200) 40%); */
        /* background-position: left;
        background-size: 0.1rem 0.5rem;
        background-repeat: repeat-y; */
    }
</style>