<style lang="scss">
    @import "../../style/molecules/photo-card";
</style>

<script lang="ts">
    import { createEventDispatcher } from 'svelte'
    import Image from '$components/atoms/Image.svelte'

    export let id: string
    export let alt: string
    export let url: string = undefined
    export let title: string = undefined
    export let location: any = undefined
    export let city: string = undefined
    export let hovered: boolean = false
    export let lazy: boolean = true

    const dispatch = createEventDispatcher()
    const sizes = {
        small: { width: 224 },
        medium: { width: 464 },
        large: { width: 864 },
    }

    const sendHover = (hover: boolean) => dispatch('hover', hover)
</script>

<div class="photo-card"
    class:is-hovered={hovered}
    on:mouseenter={() => sendHover(true)}
    on:focus={() => sendHover(true)}
    on:mouseout={() => sendHover(false)}
    on:blur={() => sendHover(false)}
>
    {#if url}
        <div class="photo-card__content">
            <a href={url} data-sveltekit-noscroll>
                <Image
                    {id}
                    sizeKey="postcard"
                    {sizes}
                    ratio={1.5}
                    {alt}
                    {lazy}
                />
                {#if title && location}
                    <div class="photo-card__info">
                        <Image
                            id={location.country.flag.id}
                            sizeKey="square-small"
                            width={24}
                            height={24}
                            alt="Flag of {location.country.name}"
                        />
                        <p>{title} - {city ? `${city}, ` : ''}{location.name}, {location.country.name}</p>
                    </div>
                {/if}
            </a>
        </div>
    {:else}
        <Image
            {id}
            sizeKey="postcard"
            {sizes}
            ratio={1.5}
            {alt}
            {lazy}
        />
    {/if}
</div>