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

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

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

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',
}));
</script>

<style scoped lang="scss">
.section-title {
  margin-bottom: 1rem;
  text-align: center;
}
</style>
