<template>
  <h1 class="title">
    {{ titleContent.value }}
  </h1>
</template>

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

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

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

<style lang="scss" scoped>
.title {
  --font-size: v-bind(titleStyle.fontSize);
  --font-family: v-bind(titleStyle.fontFamily);
  --color: v-bind(titleStyle.color);
  --font-style: v-bind(titleStyle.fontStyle);
  --font-weight: v-bind(titleStyle.fontWeigh);

  --font-size-multiplier: calc(2/3);

  font-size: calc(var(--font-size) * var(--font-size-multiplier));
  font-family: var(--font-family);
  color: var(--color);
  font-style: var(--font-style);
  font-weight: var(--font-weight);

  @media screen and (min-width: 700px) {
    --font-size-multiplier: 0.75;
  }

  @media screen and (min-width: 1200px) {
    --font-size-multiplier: 1;
  }
}
</style>
