<script lang="ts">
  interface Props {
    errorMessage: string;
  }
  const { errorMessage }: Props = $props()
</script>

{#if errorMessage}
  <div class="error-message" aria-live="polite">
    <p>{errorMessage}</p>
  </div>
{/if}

<style>
  .error-message {
    border: 2px solid red;
    border-radius: 5px;
    font-size: 1rem;
    padding: 8px;
  }
</style>
