<script lang="ts">
    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

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

<div class="photo-card">
    {#if url}
        <a href={url}>
            <Image
                id={id}
                sizeKey="postcard"
                {sizes}
                ratio={1.5}
                alt={alt}
            />
            {#if title && location}
                <div class="photo-card__info">
                    <Image
                        id={location.country.flag.id}
                        sizeKey="square"
                        width={24}
                        height={24}
                        alt="Flag of {location.country.name}"
                    />
                    <p>{title} - {location.name}, {location.city ? `, ${location.city}, ` : ''}{location.country.name}</p>
                </div>
            {/if}
        </a>
    {:else}
        <Image
            id={id}
            sizeKey="postcard"
            {sizes}
            ratio={1.5}
            alt={alt}
        />
    {/if}
</div>