<template>
  <div class="intro-textarea">
    <div v-html="data"></div>
    <div class="video-container" v-if="video">
      <video :src="video" controls autoplay></video>
    </div>
  </div>
</template>
<script setup lang="ts">
  defineProps({
    data: {
      type: String,
      default: () => '',
    },
    video: {
      type: String,
      default: () => '',
    },
  });
</script>

<style lang="scss" scoped>
  .intro-textarea {
    word-wrap: break-word;
    width: 100%;
    text-align: left;
    padding: 10px;
    line-height: 32px;
    overflow-y: scroll;
    > * {
      word-wrap: break-word;
    }
  }
  .video-container {
    width: 100%;
    min-height: 200px;
    video {
      width: 100%;
      height: 100%;
    }
  }
</style>
