<script lang="ts">
    interface ToastProps {
        message: string;
        type?: "error" | "success";
        visible?: boolean;
        duration?: number;
        onclose?: () => void;
    }

    let {
        message,
        type = "error",
        visible = $bindable(false),
        duration = 3000,
        onclose,
    }: ToastProps = $props();

    $effect(() => {
        if (visible && duration > 0) {
            const timer = setTimeout(() => {
                visible = false;
                onclose?.();
            }, duration);
            return () => clearTimeout(timer);
        }
    });
</script>

{#if visible}
    <div
        class="fixed bottom-8 left-1/2 -translate-x-1/2 z-[200] px-6 py-4 rounded-lg shadow-lg
			   font-[family-name:var(--kv-font-button)] text-lg uppercase
			   {type === 'error'
            ? 'bg-red-600 text-kv-white'
            : 'bg-green-600 text-kv-white'}"
        role="alert"
    >
        {message}
    </div>
{/if}
