<template>
  <div class="tagline">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed, CSSProperties } from 'vue';
import { getTextStyles } from '../utils/styles.ts';

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

const backgroundLightness = computed<string>(() => `${(props.design.color as Color).hsl.l * 100}%`);
const taglineStyles = computed<CSSProperties>(() => getTextStyles(props.design));
</script>

<style lang="scss" scoped>
@function set-contrast-color($lightness) {
  $threshold: 60%;
  $contrastLightness: clamp(0%, calc((#{$lightness} - #{$threshold}) * -100), 100%);

  @return hsl(0, 0%, $contrastLightness);
}

.tagline {
  --font-size: v-bind(taglineStyles.fontSize);
  --font-family: v-bind(taglineStyles.fontFamily);
  --background-color: v-bind(taglineStyles.background);
  --background-color-l: v-bind(backgroundLightness);
  --font-style: v-bind(taglineStyles.fontStyle);
  --font-weight: v-bind(taglineStyles.fontWeight);

  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--font-size);
  font-family: var(--font-family);
  background: var(--background-color);
  color: set-contrast-color(var(--background-color-l));
  font-style: var(--font-style);
  font-weight: var(--font-weight);
}
</style>
