<script>
  import { t } from '../i18n'

  export let error = ''
  export let onDismiss = () => {}

  function translateError(msg) {
    const map = {
      'vault not open': t('error.vaultNotOpen'),
    }
    return map[msg] || msg
  }

  function handleKeydown(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      onDismiss()
    }
  }
</script>

{#if error}
  <div class="error-banner" role="button" tabindex="0" on:click={onDismiss} on:keydown={handleKeydown}>
    {translateError(error)}
    <button class="dismiss-btn" on:click|stopPropagation={onDismiss} aria-label="Dismiss">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
  </div>
{/if}

<style>
  .error-banner { background: #3a2222; color: #ff8888; padding: 8px 24px; font-size: 12px; border-bottom: 1px solid #4a2222; flex-shrink: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .dismiss-btn { background: none; border: none; color: #ff6666; cursor: pointer; padding: 2px; display: flex; align-items: center; border-radius: 2px; }
  .dismiss-btn:hover { color: #ff4444; }
</style>
