<template>
  <section class="kf-p-images">
    <span class="kf-p-images-label">{{label}}</span>
    <div class="kf-p-images-body">
      <iframe :src="iframeLink" width="100%" height="100%"></iframe>
    </div>
  </section>
</template>

<script setup>
import { computed, onMounted, toRefs } from "vue";
import {defaultLink} from "../index.js";

const props = defineProps(['config','label']);
const { config ,label} = toRefs(props);


onMounted(() => {
  console.log(config.value, 'kf-images');
});


const iframeLink = computed(() => {
  let link = defaultLink;
  const data = config.value;
  if(data && typeof data === "string"){
    link = data;
  }
  return link;
})

</script>

<style lang="scss" >
.kf-p-images {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  .kf-p-images-label {
    color: #aaa;
    text-transform: capitalize;
  }
  .kf-p-images-body {
    width: 100%;
    height: 200px;
  }
}
</style>