<template>
  <div
    :class="
      type == 'withAccentBorder'
        ? `bg-${color}-50 border-l-4 border-${color}-400 p-4`
        : `rounded-md bg-${color}-50 p-4`
    "
    :id="id || undefined"
    :role="id ? 'region' : undefined"
    :aria-labelledby="id ? id + '-title' : undefined"
    :aria-describedby="
      id && description && type !== 'withAccentBorder'
        ? id + '-desc'
        : undefined
    "
  >
    <div class="flex gap-2">
      <div class="flex-shrink-0" v-if="icon" aria-hidden="true">
        <c-icon
          :type="icon.type"
          :name="icon.name"
          :class="`h-5 w-5 text-${color}-500`"
        ></c-icon>
      </div>
      <div class="flex-1">
        <template v-if="type == 'withAccentBorder'">
          <p
            :id="id ? id + '-title' : undefined"
            :class="`text-sm text-${color}-700`"
          >
            <a
              href="#"
              :class="`font-medium underline text-${color}-700 hover:text-${color}-600`"
            >
              {{ linkLabel }}
            </a>
            {{ label }}
          </p>
        </template>
        <template v-else>
          <h3
            :id="id ? id + '-title' : undefined"
            :class="`text-sm font-medium text-${color}-700 word-break`"
          >
            {{ label }}
          </h3>
          <div
            :id="id && description ? id + '-desc' : undefined"
            :class="`mt-2 text-sm text-${color}-700 max-w-full`"
            v-if="description"
          >
            <p class="whitespace-pre-line break-all">
              {{ description }}
            </p>
          </div>
          <div class="mt-4" v-if="type == 'withActions'">
            <div class="-mx-2 -my-1.5 flex">
              <button
                type="button"
                :id="id ? id + '-action' : undefined"
                :class="`bg-${color}-50 rounded-md px-2 py-1.5 text-sm font-medium text-${color}-800 hover:bg-${color}-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-${color}-50 focus:ring-${color}-600`"
              >
                {{ actions.label }}
              </button>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CAlerts",
  components: {
    CIcon,
  },
  props: {
    label: {
      type: String,
    },
    icon: {
      type: Object,
    },
    classes: {
      type: String,
    },
    color: {
      type: String,
    },
    type: {
      type: String,
    },
    description: {
      type: String,
    },
    actions: {
      type: Object,
    },
    linkLabel: {
      type: String,
    },
    id: {
      type: String,
    },
  },
};
</script>
<style scoped>
.word-break {
  word-break: break-word;
}
</style>
