<script>
    import { createEventDispatcher } from 'svelte'

    // Props
    export let className = ''
    export let photos
    export let currentIndex
    const dispatch = createEventDispatcher()
</script>

<ol class={className}>
    {#each photos as dot, index}
    <li
        class:active={index === currentIndex}
        class:small={index < currentIndex - 2 || index > currentIndex + 2}
        class:hidden={index < currentIndex - 3 || index > currentIndex + 3}
        on:click={() => dispatch('goToIndex', index)}
    >
        <button aria-label="Go to photo #{index + 1}"></button>
    </li>
    {/each}
</ol>
