<style lang="scss" src="./PhotoCard.scss"></style>

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

    let {
        id,
        alt,
        url,
        title,
        location,
        city,
        hovered = false,
        lazy = true,
        onhover,
    }: {
        id: string
        alt: string
        url?: string
        title?: string
        location?: any
        city?: string
        hovered?: boolean
        lazy?: boolean
        onhover?: any
    } = $props()

    const sizes = {
        small: { width: 224 },
        medium: { width: 464 },
        large: { width: 864 },
    }
</script>

{#snippet image()}
    <Image
        {id}
        sizeKey="postcard"
        {sizes}
        ratio={1.5}
        {alt}
        {lazy}
    />
{/snippet}

<div
    class="photo-card"
    class:is-hovered={hovered}
    onmouseenter={() => onhover(true)}
    onfocus={() => onhover(true)}
    onmouseout={() => onhover(false)}
    onblur={() => onhover(false)}
    role="presentation"
>
    {#if url}
        <div class="photo-card__content">
            <a href={url} data-sveltekit-noscroll>
                {@render image()}

                {#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}
        {@render image()}
    {/if}
</div>
