<script setup>
const props = defineProps({
  name: String,
  details: String,
  level: Number,
  type: String,
});

const color = computed(() => {
  if (props.level === 1) return "yellow";
  if (props.level === 2) return "orange";
  if (props.level === 3) return "red";
});
</script>

<template>
  <div
    :class="['card m-0', `has-background-${color}-95`]"
    :style="{
      borderColor: `var(--bulma-${color}-70)`,
    }"
  >
    <div class="card-content p-4 is-flex is-align-items-center is-gap-2">
      <Icon
        :name="type === 'time' ? 'material-symbols:clock-loader-40' : 'material-symbols:box-outline-rounded'"
        :size="20"
        :class="`has-text-${color}-45`"
      />
      <div>
        <p :class="`has-text-${color}-40`">{{ name }}</p>
        <p class="fs-13 has-text-grey">{{ details }}</p>
      </div>
    </div>
  </div>
</template>
