<template>
  <h1
    class="section-title"
    :style="titleStyle"
  >
    {{ titleContent.value }}
  </h1>
</template>

<script setup lang="ts">
import { useInputboxElementContent, useTextElementDesign } from '@lightspeed/crane';
import { computed, CSSProperties } from 'vue';

import type { Content, Design } from '../type.ts';

const titleContent = useInputboxElementContent<Content>('title');
const titleDesign = useTextElementDesign<Design>('title');

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

<style lang="scss" scoped>
.section-title {
  margin-bottom: 20px;
}
</style>
