---
import type { CollectionEntry } from 'astro:content';
import dayjs from "dayjs";
import de from "dayjs/locale/de";
dayjs.locale(de);

interface Props {
  project: CollectionEntry<"projects">;
}

const { project } = Astro.props;
---

<a href=`/projects/${project.id}` class="card-link">
    <div class="glass">
        <hgroup>
            <h2>{project.data.title}</h2>
            <p class="date">{dayjs(project.data.published ?? project.data.lastModified).format("DD.MM.YYYY")}</p>
        </hgroup>
        <hr />
        <p>{project.data.summary}</p>
        { project.data.tags ? 
            <div class="tag-area">Tags: <ul>{project.data.tags.map(tag => <li>{ tag }</li>)}</ul></div>
            : null 
        }
    </div>
</a>

<style lang="scss">
    .card-link {
        display: inline-block;
        width: min-content;
        min-width: 250px;
        max-width: 350px;
        text-decoration: none;
        color: var(--text-color);
        scroll-snap-align: start;
    }

    .date {
        font-size: 80%;
        color: var(--text-color-dark, var(--projects-text-color-dark));
        margin-top: 0rem;
    }

    div {
        --border-width: 1px;
        padding: 1rem;
        z-index: 1;

        h2 {
            margin: 0;
            color: var(--accent-color, var(--projects-accent-color));
        }

        &::after {
            content: "";
            position: absolute;
            inset: -4px;
            z-index: -9999;
            pointer-events: none;
            border-radius: inherit;
            background: transparent;
            border: 5px solid var(--glass-color, var(--projects-glass-color));
            filter: blur(4px);
            opacity: 0;
            transition: opacity .3s, filter 1s;
        }

        &:hover::after {
            opacity: 1;
            animation: glow 3s infinite cubic-bezier(.45,.05,.55,.95);

            @keyframes glow {
                0%, 100% {
                    filter: blur(4px);
                }
                50% {
                    filter: blur(9px);
                }
            }
        }
    }

    .tag-area {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .5em;

        ul {
            list-style: "#";
            list-style-position: inside;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: start;
            margin: 0;
            padding: 0;
            gap: .3em;

            li {
                font-size: 80%;
                border: 1px solid #888;
                border-radius: .8rem;
                padding: .3em .5em;
            }
        }
    }
</style>