<template>
  <div class="ged-card" :style="cardStyle">
    <div class="ged-card__content">
      <Title tag="h4">{{ unescapeHtml(heritedData.title) }}</Title>

      <img v-if="background" :src="background" :alt="heritedData.title" />
    </div>
  </div>
</template>

<script>
import { storage } from '@inside-library/helpers/Storage'

import { Title } from 'inside-collection/atoms'

import { unescapeHtml } from '@inside-library/filters/UnescapeHtml'

export default {
  name: 'GedCard',
  components: { Title },
  props: {
    background: {
      type: String
    },
    color: {
      type: String
    }
  },
  data() {
    return {
      cardStyle: {
        borderLeftColor: this.color
          ? this.color
          : storage.get('brand').primary_color
      }
    }
  },
  methods: {
    unescapeHtml
  }
}
</script>

<style lang="scss">
@use '../../../styles/modules/inside-customs/ged/ged-card.scss' as *;
</style>
