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

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

    export let url: string
    export let photoId: string
    export let photoAlt: string
    export let title: string
    export let index: string
    export let ratio: number
    export let date: string = undefined
    export let city: string = undefined
    export let location: string
</script>

<div class="house grid">
    <div class="house__info">
        <h2 class="title-image">
            {title}
        </h2>
        <p class="info text-info">
            {#if city}
                <a href="https://www.openstreetmap.org/search?query={title}, {city} {location}" target="_blank" rel="noopener noreferrer">
                    <Icon class="icon" icon="map-pin" label="Map pin" /> {city}
                </a>
                <span class="sep">·</span>
            {/if}
            {#if date}
                <time datetime={dayjs(date).format('YYYY-MM-DD')}>
                    {dayjs(date).format('MMMM YYYY')}
                </time>
            {/if}
        </p>
    </div>

    <div class="house__photo grid" class:not-landscape={ratio < 1.475}>
        <a href={url} sveltekit:noscroll tabindex="0">
            <figure class="house__image shadow-photo">
                <Image
                    class="photo"
                    id={photoId}
                    sizeKey="photo-list"
                    sizes={{
                        small: { width: 500 },
                        medium: { width: 850 },
                        large: { width: 1280 },
                    }}
                    ratio={1.5}
                    alt={photoAlt}
                />
            </figure>
        </a>
        <span class="house__index title-index"
            class:has-one-start={index.startsWith('1')}
            class:has-one-end={index.endsWith('1')}
        >
            {index}
        </span>
    </div>
</div>