<script setup lang="ts">
withDefaults(
  defineProps<{
    severity?: 'info' | 'success' | 'warn' | 'error' | 'secondary'
    closable?: boolean
  }>(),
  {
    severity: 'info',
    closable: false,
  },
)

defineEmits<{ close: [] }>()
</script>

<template>
  <div class="nych-message" :data-p="severity" role="status">
    <div class="nych-message-content">
      <span v-if="severity === 'info'" class="nych-message-icon">
        <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" width="18" height="18">
          <path d="M9 8.5v5M9 5.5h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </span>
      <span v-else-if="severity === 'success'" class="nych-message-icon">
        <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" width="18" height="18">
          <path
            d="M4 9.5L7.5 13L14 5.5"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="none"
          />
        </svg>
      </span>
      <span v-else-if="severity === 'warn'" class="nych-message-icon">
        <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" width="18" height="18">
          <path d="M9 4v6M9 13.5h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </span>
      <span v-else-if="severity === 'error'" class="nych-message-icon">
        <svg viewBox="0 0 18 18" fill="none" aria-hidden="true" width="18" height="18">
          <path d="M5.5 5.5l7 7M12.5 5.5l-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </span>
      <span class="nych-message-text"><slot /></span>
      <button
        v-if="closable"
        type="button"
        class="nych-message-closeButton"
        aria-label="Dismiss"
        @click="$emit('close')"
      >
        <svg class="nych-message-closeIcon" viewBox="0 0 12 12" fill="none" aria-hidden="true">
          <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
        </svg>
      </button>
    </div>
  </div>
</template>
