<script lang="ts">
    import { fade } from "svelte/transition";
    import type { CardConfig } from "./Card.types";
    import { IconHelpCircle, IconRefresh } from "@tabler/icons-svelte";
    import Tooltip from "$lib/Tooltip.svelte";

    export let config: CardConfig;
</script>

<div class="card" in:fade={{ duration: 250 }}>
    <div class="header">
        <h2 class="title">{config.title}</h2>
        <div class="actions">
            {#if config.showHelp}
                <Tooltip text={config.helpText}>
                    <button aria-label="Help">
                        <IconHelpCircle />
                    </button>
                </Tooltip>
            {/if}
            {#if config.showRefresh}
                <button class:refreshing={config.refreshing} on:click={config.onRefresh} aria-label="Refresh">
                    <IconRefresh />
                </button>
            {/if}
        </div>
    </div>
    <div class="content">
        <slot />
    </div>
</div>

<style>
    .card {
        width: 85%;
        max-width: 400px;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 20px;
        padding: 10px 5px 5px 5px;
        background-color: var(--island-bg-color);
        border-radius: 10px;
        box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.29);
        min-height: 75px;
    }

    .header {
        color: var(--island-header-color);
        font-size: 14px;
        display: flex;
        margin: 0;
        width: 100%;
        justify-content: center;
        align-items: center;
        position: relative;
        text-shadow: 2px 1px 10px rgba(0, 0, 0, 0.29);
    }

    .title {
        flex-grow: 1;
        text-align: center;
        margin: 0;
    }

    .actions {
        display: flex;
        position: absolute;
        top: 5px;
        right: 0;
        display: flex;
        gap: 0px;
    }

    .refreshing {
        animation: spin 1.5s linear infinite;
        transform-origin: 50% 45%;
    }

    .content {
        margin-top: 5px;
    }

    button {
        cursor: pointer;
        color: white;
        background: none;
        border: none;
        transition: all 0.3s ease;
    }

    button:hover {
        color: var(--island-header-color);
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
            color: white;
        }
        50% {
            color: rgb(185, 185, 255);
        }
        100% {
            transform: rotate(-360deg);
            color: white;
        }
    }
</style>
