<template>
  <div :class="getModifiersClass('c-card', modifiers)">
    <div v-if="imageUrl" class="c-card__image">
      <img :src="imageUrl" :alt="heading">
    </div>
    <div class="c-card__text">
      <div v-if="preHeading" class="c-card__pre-heading">{{ preHeading }}</div>

      <h3 class="c-card__heading">
        <span v-html="heading">
        </span>
        <span v-if="arrow" class="c-card__heading-arrow"></span>
      </h3>
      <div v-if="content" v-html="content">
      </div>
    </div>
    <div v-if="tags" class="c-card__tags">
      <o-chip v-for="tag in tags" :key="tag" :modifiers="['yellow']" :text="tag" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ModifierItems } from './card.config';
import useComponentModifiers from '../../composable/useComponentModifiers';
import OChip from '../../vue/chip';

defineProps<{
  heading?: string;
  preHeading?: string;
  content?: string;
  imageUrl?: string;
  arrow?: boolean;
  tags?: string[];
  modifiers?: ModifierItems;
}>();

const { getModifiersClass } = useComponentModifiers();
</script>
