<template>
  <div
    v-if="paragraphs.length > 0"
    class="ui-full-descr"
  >
    <p
      v-for="(paragraph, i) in paragraphs"
      :key="i"
    >{{ paragraph }}</p>
  </div>
</template>

<script setup lang="ts">
import { splitParagraphs } from '../../utils/ui-full-descr/split-paragraphs';

const props = defineProps<{
  text: string
}>();

const paragraphs = computed(() => splitParagraphs(props.text));
</script>

<style lang="scss">
.ui-full-descr {
  @include font-sm;

  margin-top: 40px;
  margin-bottom: 32px;
  color: $full-description-text;
  line-height: 1.625;
  padding: 24px;
  border-radius: $radius-xl;
  background-color: $full-description-bg;

  p + p {
    margin-top: 16px;
  }
}
</style>
