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

    export let id: string
    export let alt: string
    export let disabled = false

    let hovering = false
    let timer: ReturnType<typeof setTimeout> | number = null

    $: classes = [
        hovering ? 'is-hovered' : undefined,
        disabled ? 'is-disabled' : undefined,
        $$props.class
    ].join(' ').trim()

    // Hovering functions
    const handleMouseEnter = () => {
        clearTimeout(timer)
        hovering = true
    }
    const handleMouseLeave = () => {
        // Reset hovering to false after a delay
        timer = setTimeout(() => hovering = false, 800)
    }
</script>

<figure class={classes}
    on:mouseenter={handleMouseEnter}
    on:mouseleave={handleMouseLeave}
>
    <Image
        {id}
        sizeKey="photo-list"
        sizes={{
            small: { width: 250 },
        }}
        ratio={1.5}
        {alt}
    />
</figure>
