<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2024 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
    import { twMerge } from "tailwind-merge";
    import { onMount } from "svelte";

    let cardElement: HTMLDivElement = $state();

    function rotateElement(event: MouseEvent) {
        if (!hoverEffect) return;

        const x = event.clientX;
        const y = event.clientY;

        const boundingRect = cardElement.getBoundingClientRect();
        const centerX = boundingRect.left + boundingRect.width / 2;
        const centerY = boundingRect.top + boundingRect.height / 2;

        const rotateX = (centerY - y) / 20;
        const rotateY = -(centerX - x) / 20;

        cardElement.style.setProperty("--rotate-x", `${rotateX}deg`);
        cardElement.style.setProperty("--rotate-y", `${rotateY}deg`);
    }

    function resetElement() {
        cardElement.style.setProperty("--rotate-x", "0");
        cardElement.style.setProperty("--rotate-y", "0");
    }

    interface Props {
        hoverEffect?: boolean;
        extraClasses?: string;
        children?: import("svelte").Snippet;
    }

    let { hoverEffect = true, extraClasses = "", children }: Props = $props();
    let classes = $derived(twMerge("w-72 border-2 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses));
</script>

<div class={classes} bind:this={cardElement} onmousemove={rotateElement} onmouseleave={resetElement} class:hoverEffect>
    {@render children?.()}
</div>

<style lang="scss">
    div {
        transform: perspective(1000px) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) !important;

        transition: scale 300ms cubic-bezier(0.2, 3, 0.67, 0.6);

        :global(h1) {
            @apply text-xl font-bold mt-4;
        }

        :global(svg) {
            @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl;
        }
    }

    .hoverEffect:hover {
        scale: 105%;
    }
</style>
