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

const props = defineProps<{
  quote: string;
}>();

const quoteFontSize = computed(() => {
  const length = props.quote.length;

  if (length > 140) {
    return '1.75rem';
  }

  if (length > 100) {
    return '1.95rem';
  }

  return '2.2rem';
});
</script>

<template>
  <section class="card quote-card">
    <p class="quote-card__content" :style="{ fontSize: quoteFontSize }">{{ quote }}</p>
  </section>
</template>
