<template>
  <div>
    <h1
      v-if="showTitle"
      :style="titleStyle"
    >
      {{ titleContent.value }}
    </h1>
    <p
      v-if="showDescription"
      class="title-section__description"
      :style="descriptionStyle"
    >
      {{ descriptionContent.value }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {
  useInputboxElementContent, useTextareaElementContent, useTextElementDesign, useTextareaElementDesign,
} from '@lightspeed/crane';
import { Content, Design } from '../../type.ts';

const titleContent = useInputboxElementContent<Content>('section_title');
const descriptionContent = useTextareaElementContent<Content>('section_description');
const titleDesign = useTextElementDesign<Design>('section_title');
const descriptionDesign = useTextareaElementDesign<Design>('section_description');

const showTitle = computed(() => titleDesign.visible && titleContent.hasContent);
const showDescription = computed(() => descriptionDesign.visible && descriptionContent.hasContent);

const titleStyle = computed(() => ({
  fontSize: `${titleDesign.size}px`,
  fontFamily: titleDesign.font,
  color: (titleDesign.color as Color).hex,
  'font-style': titleDesign.italic ? 'italic' : 'normal',
  'font-weight': titleDesign.bold ? 'bold' : 'normal',
}));

const descriptionStyle = computed(() => ({
  fontSize: `${descriptionDesign.size}px`,
  fontFamily: descriptionDesign.font,
  color: (descriptionDesign.color as Color).hex,
  'font-style': descriptionDesign.italic ? 'italic' : 'normal',
  'font-weight': descriptionDesign.bold ? 'bold' : 'normal',
  'white-space': descriptionDesign.whiteSpace,
}));
</script>

<style lang="scss" scoped>
.title-section__description {
  max-width: 80%;
}
</style>
