<script lang="ts">
import { ShieldX } from '@lucide/svelte';

interface Props {
    title?: string;
    message?: string;
    action_label?: string;
    on_action?: () => void;
}

let {
    title = 'Access Denied',
    message = 'You do not have permission to view this content.',
    action_label = '',
    on_action = undefined
}: Props = $props();
</script>

<div class="card max-w-sm space-y-4 p-6">
    <div class="text-error-500 flex items-center gap-2">
        <ShieldX size="1.2em" />
        <h3 class="text-lg font-semibold">{title}</h3>
    </div>
    <p class="text-sm text-gray-700">{message}</p>
    {#if action_label && on_action}
        <button
            type="button"
            class="btn preset-tonal-surface w-full"
            onclick={on_action}>
            {action_label}
        </button>
    {/if}
</div>
