<template>
  <div class="news-criticality-container" :style="{ background: color }">
    <div class="icon-container">
      <img :src="$_getContentImage(image, 'avatar')" :alt="$_tr('altImg')" />
    </div>

    <BaseText class="label" dark-mode>{{ title }}</BaseText>
  </div>
</template>

<script>
import { BaseText } from 'inside-collection/atoms'

export default {
  name: 'NewsCriticality',
  $_i18nRootPath: 'customs.NEWS_CRITICALITY',
  components: { BaseText },
  props: {
    color: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    image: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss">
.news-criticality-container {
  display: flex;
  align-items: center;

  padding: var(--spacing-xs) var(--spacing-m) var(--spacing-xs)
    var(--spacing-xs);
  border-radius: var(--radius-xl);

  .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-l);
    height: var(--spacing-l);
    background: var(--color-light);
    border-radius: var(--radius-xl);
    margin-right: var(--spacing-xs);

    img {
      width: var(--spacing-m);
      height: var(--spacing-m);
    }
  }
}
</style>
