<script lang="ts">
    export interface LinkEntry {
        title: string;
        subtitle: string;
        img: string;
        imgAlt: string;
        link: string;
        description: string;
    }

    let {
        entries,
    }: {
        entries: LinkEntry[];
    } = $props();
</script>

<div class="hs-post-list">
    {#each entries as entry}
        {@render linkEntry({entry})}
    {/each}
</div>

{#snippet linkEntry({entry}: {entry: LinkEntry})}
    <a class="hs-list-container blurred-background-hover" href="{entry.link}">
        <div class="hs-list-img-container">
            <img class="hs-list-img" src="{entry.img}" alt="{entry.imgAlt}">
        </div>
        <div class="hs-list-text-container">
            <p class="hs-list-subtitle">{@html entry.subtitle}</p>
            <p class="hs-list-title">{entry.title}</p>
            <p class="hs-list-description">{entry.description}</p>
        </div>
    </a>
{/snippet}

<style>
    :root {
        --color-laura: #C76668CC;
        --color-laura-darker: #A55051CC;
    }

    .hs-post-list {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }

    .hs-list-container {
        box-sizing: content-box;
        height: 120px;
        display: flex;
        flex-direction: row;
        text-decoration: none;
        align-items: center;
        margin: 0;
        justify-content: center;
        border: var(--border-style) transparent var(--border-dash-size);
        border-radius: var(--border-radius);
        transition: border-color var(--duration-animation) var(--anim-curve);
    }

    .hs-list-img-container {
        width: 220px;
        min-width: 220px;
        height: 100%;
        overflow: hidden;
        transition: border-radius var(--duration-animation) var(--anim-curve);
    }

    .hs-list-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: scale var(--duration-animation) var(--anim-curve);
    }

    .hs-list-text-container {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-rows: 1fr 1fr 0fr;
        align-items: center;
        flex-grow: 1;
        padding: 0 16px;
        transition: background-color var(--duration-animation) var(--anim-curve),
                    backdrop-filter var(--duration-blur) var(--anim-curve),
                    grid-template-rows var(--duration-blur) var(--anim-curve);
    }

    .hs-list-title, .hs-list-subtitle, .hs-list-description {
        margin: 0;
        transition: color var(--duration-animation) var(--anim-curve),
                    opacity var(--duration-animation) var(--anim-curve);
    }

    .hs-list-title {
        font-family: var(--font-mono);
        font-weight: 700;
    }

    .hs-list-subtitle, .hs-list-description {
        font-size: 1.0rem;
        line-height: 1.2rem;
        overflow: hidden;
    }

    .hs-list-description {
        font-weight: 500;
        opacity: 0;
    }

    .hs-list-container:hover {
        border-color: var(--color-highlight-alt);
        background-color: var(--color-background-highlight-alt);
    }

    @media screen and (min-width: 800px) {
        .hs-list-title {
            font-size: 1.4rem;
            line-height: 2.0rem;
        }

        .hs-list-container:hover .hs-list-img {
            scale: 1.2;
        }

        .hs-list-container:hover .hs-list-img-container {
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
        }

        .hs-list-container:hover .hs-list-text-container {
            grid-template-rows: 0fr 1fr 1fr;
        }

        .hs-list-container:hover .hs-list-subtitle {
            opacity: 0;
            
        }

        .hs-list-container:hover .hs-list-description {
            opacity: 1;
        }
    }
    @media screen and (max-width: 800px) {
        .hs-list-title {
            font-size: 1.0rem;
            line-height: 1.1rem;
        }

        .hs-list-description {
            display: none;
        }

        .hs-list-subtitle {
            font-size: 0.8rem;
            line-height: 1rem;
        }
        
        .hs-list-container {
            height: 72px;
        }

        .hs-list-text-container {
            padding-left: 8px;
        }
        
        .hs-list-img-container {
            width: 110px;
            min-width: 110px;
        }
    }
</style>