<script>
    import { currentLocation } from 'utils/store'
    // Components
    import IconGlobe from 'atoms/IconGlobe'

    // Props
    export let type = ''
    export let radius = 32

    // Variables
    let location
    let locationName
    let locationOf

    $: {
        location = $currentLocation
        locationName = location ? location.name : 'World'
        locationOf = location ? 'Of' : 'Of The'
    }
</script>

<div class="switcher {type}">
    <div class="switcher__text" class:empty={!location}>
        <a href="/" sapper-noscroll>
            {#if !location}
            <span class="top">Houses</span>
            <span class="bottom">
                <em class="same-line">{locationOf}</em> {locationName}
            </span>
            {:else}
            <span class="top">Houses <em>{locationOf}</em></span>
            <span class="bottom">{locationName}</span>
            {/if}
        </a>
    </div>

    <div class="button-control button-control--dashed switcher__icon">
        <a href="/choose" aria-label="Change the location" sapper-noscroll>
            <IconGlobe
                color={type.includes('side') ? '#333' : '#fff'}
                width={type.includes('side') ? 18 : 24}
            />
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <circle cx="50%" cy="50%" r="{type.includes('side') ? 24 : radius}px"></circle>
            </svg>
        </a>
    </div>
</div>
