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

import { QUOTE_ICON_ASSET } from '@/lib/icon-assets';

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

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

  if (length > 120) {
    return 'calc(1.05rem * var(--quote-content-font-scale, 1))';
  }

  if (length > 80) {
    return 'calc(1.22rem * var(--quote-content-font-scale, 1))';
  }

  if (length > 48) {
    return 'calc(1.4rem * var(--quote-content-font-scale, 1))';
  }

  return 'calc(1.6rem * var(--quote-content-font-scale, 1))';
});
</script>

<template>
  <section class="card quote-card">
    <div class="quote-card__header">
      <img class="quote-card__icon" :src="QUOTE_ICON_ASSET" alt="" aria-hidden="true" />
      <span class="quote-card__title">每日鸡汤</span>
    </div>
    <p class="quote-card__content" :style="{ fontSize: quoteFontSize }">{{ quote }}</p>
  </section>
</template>

<style scoped>
.quote-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.34rem;
  padding: 0.72rem 1.02rem;
  background: var(--panel-background);
  overflow: hidden;
}

.quote-card__header {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
}

.quote-card__icon {
  width: 0.9rem;
  height: 0.9rem;
  filter: brightness(0) saturate(100%);
}

.quote-card__title {
  font-family: var(--title-font);
  font-size: calc(0.8rem * var(--theme-font-scale, 1));
  font-weight: 600;
}

.quote-card__content {
  margin: 0;
  line-height: 1.34;
  color: var(--ink);
}
</style>
