<script lang="ts">
  const { message, visible, ondismiss }: {
    message: string;
    visible: boolean;
    ondismiss?: () => void;
  } = $props();
</script>

{#if visible}
  <div
    role="status"
    style="
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 200;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-overlay);
      border-radius: var(--radius-lg);
      color: var(--color-text);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    "
  >
    <span>{message}</span>
    <button aria-label="Schließen" onclick={ondismiss}>✕</button>
  </div>
{/if}
