<script>
    // Props
    export let location

    // Variables
    const { name, slug, country } = location
</script>

<div class="location">
    <a href="/location/{country.slug}/{slug}" rel="prefetch">
        <img src={country.flag.full_url} alt="Flag of {country.name}">
        <div class="anim-mask mask-city">
            <h3 class="location__city">{name}</h3>
        </div>
        <div class="anim-mask mask-country">
            <p class="location__country style-caps">{country.name}</p>
        </div>
    </a>
</div>
