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

    export let locations: any
</script>

<div class="browse">
    <div class="browse__description">
        <p>Browse all the cities and countries</p>
    </div>

    <ul class="browse__continents" id="continents">
        <li>
            <Button tag="button" text="All" class="button-outline" />
            <Button tag="button" text="Europe" class="button-outline" />
        </li>
    </ul>

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