<script lang="ts">
  import type { ApiError } from '$lib/api/client';

  let {
    error,
    onRetry
  }: { error: unknown; onRetry: () => void } = $props();

  const apiErr = $derived(error as ApiError | undefined);
  const message = $derived(apiErr?.message ?? 'Something went wrong.');
</script>

<div role="alert" class="rounded border border-danger/40 bg-surface p-4">
  <p class="text-text-primary">{message}</p>
  <button
    type="button"
    class="mt-2 rounded bg-accent px-3 py-1 text-sm text-background"
    onclick={onRetry}
  >
    Try again
  </button>
</div>
