<style lang="scss">
    @import "./Collage";
</style>

<script lang="ts">
    import PhotoCard from '$components/molecules/PhotoCard/PhotoCard.svelte'

    export let photos: any[] = []

    let hovered: number = null
</script>

{#if photos}
    <div class="collage" class:is-hovering={hovered !== null}>
        {#each photos as { slug, title, image, location, city }, index}
            <PhotoCard
                id={image.id}
                alt={title}
                url="/{location.country.slug}/{location.slug}/{slug}"
                title={title}
                location={location}
                city={city}
                hovered={hovered === index}
                lazy={false}
                on:hover={({ detail }) => hovered = detail ? index : null}
            />
        {/each}
    </div>
{/if}
