<script>
    import { dateOlderThan } from 'utils/functions'
    // Components
    import Badge from 'atoms/Badge'

    // Props
    export let location

    // Variables
    const { name, slug, country, last_updated } = location
    const timeLimit = 7 * 24 * 60 * 60 * 1000 // d*h*m*s*ms = 1 week
</script>

<div class="location" role="listitem">
    <a href="/location/{country.slug}/{slug}" rel="prefetch" sapper-noscroll>
        <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>

        {#if dateOlderThan(last_updated, timeLimit)}
        <Badge size="small" text="new" />
        {/if}
    </a>
</div>
