<template>
  <div class="ps-image-card">
    <img
      :src="image"
      class="image-card_img"
    />
    <div class="image-card_info">
      <div class="image-card_top">
        <div class="image-card_top_left">
          <div
            v-if="$slots.icon"
            class="image-card_icon"
          >
            <slot name="icon"></slot>
          </div>
          <div class="image-card_top_left_content">
            <p class="image-card_title">{{title}}</p>
            <p class="image-card_sub_title">{{subTitle}}</p>
            <div class="image-card_base_data">
              <p
                v-for="item in baseData"
                :key="item.name"
                class="image-card_base_data_p"
              >
                {{item.name}}: {{item.value}}
              </p>
            </div>
          </div>
        </div>
        <div
          class="image-card_tag"
          v-if="$slots.tag"
        >
          <slot name="tag"></slot>
        </div>
      </div>
      <div
        class="image-card_bottom_data"
        v-if="bottomData.length"
      >
        <p
          v-for="item in bottomData"
          :key="item.name"
          class="image-card_bottom_data_p"
        >
          {{item.name}} <span class="image-card_bottom_data_span">{{item.value}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PsImageCard',
  props: {
    image: {
      type: String,
      default: null
    },
    title: {
      type: String,
      default: null
    },
    subTitle: {
      type: String,
      default: null
    },
    baseData: {
      type: Array,
      default: () => []
    },
    bottomData: {
      type: Array,
      default: () => []
    }
  }
}
</script>
