<template>
  <div class="highlighted-text">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed, CSSProperties } from 'vue';

const props = defineProps<{
  design: TextDesignData
}>();

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

<style lang="scss" scoped>
.highlighted-text {
  --font-size: v-bind(textStyle.fontSize);
  --font-family: v-bind(textStyle.fontFamily);
  --color: v-bind(textStyle.color);
  --font-style: v-bind(textStyle.fontStyle);
  --font-weight: v-bind(textStyle.fontWeight);

  --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);
  line-height: 1.5;
  cursor: pointer;
  text-decoration: underline;

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

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