kuldvillak-mvp-ei-forki/src/lib/components/kuldvillak/ui/KvProjectorCard.svelte

<script lang="ts">
    interface Props {
        variant: "category" | "price" | "player";
        text?: string;
        score?: number;
        isRevealed?: boolean;
        isActive?: boolean;
        class?: string;
    }

    let {
        variant,
        text = "",
        score = 0,
        isRevealed = false,
        isActive = false,
        class: className = "",
    }: Props = $props();
</script>

{#if variant === "category"}
    <!-- Category Card for Projector -->
    <div
        class="bg-kv-board px-4 py-8 flex items-center justify-center overflow-hidden {className}"
    >
        <span
            class="font-kv-body text-kv-white text-5xl text-center uppercase leading-tight kv-shadow-text"
        >
            {text || "Kategooria"}
        </span>
    </div>
{:else if variant === "price"}
    <!-- Price Card for Projector -->
    <div
        class="bg-kv-board flex items-center justify-center overflow-hidden {className}"
    >
        {#if isRevealed}
            <span class="opacity-0">{text}</span>
        {:else}
            <span
                class="font-kv-price text-kv-yellow text-7xl text-center kv-shadow-price"
            >
                {text}
            </span>
        {/if}
    </div>
{:else if variant === "player"}
    <!-- Player Score Card for Projector -->
    <div
        class="bg-kv-board px-4 py-4 flex flex-col items-center justify-center gap-1 overflow-hidden
			{isActive ? 'ring-4 ring-kv-yellow' : ''}
			{className}"
    >
        <span
            class="font-kv-body text-kv-white text-3xl text-center uppercase leading-tight kv-shadow-text"
        >
            {text}
        </span>
        <span
            class="font-kv-body text-3xl text-center kv-shadow-text {score < 0
                ? 'text-red-500'
                : 'text-kv-white'}"
        >
            {score}€
        </span>
    </div>
{/if}