<script>
    import {
        currentLocation,
    } from '../store'

    // Components
    import IconGlobe from '../atoms/iconGlobe'

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

    // Location 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="/">
            {#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">
            <IconGlobe
                color={type.includes('side') ? '#333' : '#fff'}
                width={type.includes('side') ? 18 : 24}
            />
            <svg>
                <circle cx="50%" cy="50%" r="{type.includes('side') ? 24 : radius}px"></circle>
            </svg>
        </a>
    </div>
</div>

<!-- <div class="switcher switcher--side">
    <p class="switcher__location">
        <a href="/">Houses <span class="caps">{locationOf}</span></a> <br>
        <strong class="name">{locationName}</strong>
    </p>

    <a href="/choose" class="switcher__icon icon is-medium has-text-danger">
        <i class="fas fa-exchange-alt fa-lg"></i>
    </a>
</div> -->