<script lang="ts">
    import { apiBaseURL } from "../../../config"
    import { pages, rerender } from "../../store"
    import { navigate } from "svelte-routing/src/history"
    export let pageId: string
    export let col: Column
    let hover = -1
</script>

<div class="persons">
    {#each col.personPreview as pp, i}
        <button
            class="person"
            on:click="{() => {
                $rerender = $rerender + 1
                navigate(Object.values($pages)?.find((o) => o.id == pp.link)?.path || '/')
            }}"
        >
            <div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
                <!-- Initial Image -->
                <img
                    class="initial"
                    src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}"
                    alt="img"
                    style="opacity: {hover == i ? 0 : 1}"
                />
                <!-- Hover Image -->
                <img
                    class="hover"
                    src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}"
                    alt="img"
                    style="opacity: {hover == i ? 1 : 0}"
                />
            </div>
            <div class="text">
                {pp.name}
            </div>
        </button>
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .persons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        @media @tablet {
            gap: 80px;
        }
        .person {
            cursor: pointer;
            @media @tablet {
                margin: 40px 0px;
            }
            display: flex;
            flex-direction: column;
            .image {
                width: 290px;
                height: 368px;
                position: relative;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    position: absolute;
                    top: 0;
                    left: 0;
                    transition: opacity 0.3s; 
                }
            }
            .text {
                width: 100%;
                background-color: @bg-color-secondary;
                color: @font-color-secondary;
                border: 2px solid @bg-color-secondary;
                padding: 2px 15px;
                font-weight: bold;
            }
        }
    }
</style>
