<script lang="ts">
	import type { ProjectEntry } from '$lib/types/data';
	import { MousePointerClick } from '@lucide/svelte';

	let {
		title,
		description,
		taskHeadline,
		tasks,
		toolsHeadline,
		tools
	}: ProjectEntry = $props();

	function inViewOnce(node: HTMLElement) {
		const observer = new IntersectionObserver((entries) => {
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					node.classList.add('in-view');
					observer.disconnect();
				}
			});
		}, { threshold: 1.0 });

		observer.observe(node);

		return {
			destroy() {
				observer.disconnect();
			}
		};
	}
</script>

<article use:inViewOnce>
	<div class="content">
		<div class="front">
			<span class="icon">
				<MousePointerClick class="icon" />
			</span>
			<span class="title">{title}</span>
			<span class="description">{description}</span>
		</div>
		<div class="back">
			<div class="tasks">
				<span class="task-headline">{taskHeadline}</span>
				<span class="task-description">{tasks}</span>
			</div>
			<div class="tools">
				<span class="tools-headline">{toolsHeadline}</span>
				<ul class="tools-tags">
					{#each tools as tool, i (i)}
						<li class="tools-tags-tag">{tool}</li>
					{/each}
				</ul>
			</div>
		</div>
	</div>
</article>

<style>
    article {
        display: block;
        text-wrap: pretty;
        text-wrap: balance;
        border-radius: 1rem;
        transition: box-shadow ease-in-out 0s;

        perspective: 1000px;

        &:hover {
            transition: box-shadow ease-in-out 0.1s 0.4s;
            box-shadow: var(--color-card-box-shadow);
        }
    }

    @media (min-width: 768px) {
        :global(article.in-view) {
            animation: shake 0.4s ease-in-out;
        }
    }

    @keyframes shake {
        0%, 100% {
            rotate: 0;
        }
        30%, 70% {
            rotate: 2deg;
        }
        40%, 80% {
            rotate: -2deg;
        }
    }


    .content {
        display: grid;

        width: 100%;
        height: 100%;
        border-radius: 1rem;
        text-align: center;

        transition: transform 0.5s;
        transform-style: preserve-3d;
    }

    article:hover .content {
        transform: rotateY(180deg);
    }

    .front, .back {
        grid-column: 1;
        grid-row: 1;

        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;
        padding: 1.5rem;
        border-radius: 1rem;

        backface-visibility: hidden;

        @media (min-width: 768px) {
            padding: 2rem;
        }
    }

    .front {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;

        color: white;
        background-image: linear-gradient(
                to right bottom,
                var(--color-project-card-front-background-primary) 0%,
                var(--color-project-card-front-background-secondary) 100%
        );
    }

    .icon {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
    }

    .title {
        color: var(--color-profile-title-text);
        font-size: 1rem;
        line-height: 1.4;
        font-weight: bold;

        @media (min-width: 768px) {
            font-size: 1.25rem;
        }
    }

    .description {
        font-size: 1rem;
        line-height: 1.5;
    }

    .back {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        gap: 2rem;

        color: white;
        background-image: linear-gradient(
                to right bottom,
                var(--color-project-card-back-background-primary) 0%,
                var(--color-project-card-back-background-secondary) 100%
        );
        transform: rotateY(180deg);
    }

    .tasks {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .task-headline {
        font-size: 1.25rem;
        font-weight: bold;
    }

    .task-description {
        font-size: 1rem;
        line-height: 1.5;
    }

    .tools {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .tools-headline {
        font-size: 1rem;
        font-weight: bold;
    }

    .tools-tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;

        margin: unset;
        padding: unset;
        list-style: none;
    }

    .tools-tags-tag {
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        background-color: var(--color-header-border);
        font-size: 0.875rem;
    }
</style>