<script lang="ts">
    import { getContext } from 'svelte'
    // Components
    import Button from '$components/atoms/Button.svelte'
    import Location from '$components/molecules/Location.svelte'

    export let locations: any

    const { continents, settings: { explore_list }} = getContext('global')
</script>

<div class="browse" id="locations">
    <div class="browse__description">
        <p>{explore_list}</p>
    </div>

    <ul class="browse__continents" role="navigation">
        {#each continents as { name, slug }}
            <li>
                <Button tag="button" text={name} class="button--small" />
            </li>
        {/each}
    </ul>

    <div class="browse__locations" role="list">
        {#each locations as location}
            <Location
                location={location}
            />
        {/each}
    </div>
</div>