<template>
  <span v-if="isCut">{{ cutText }}</span>
  <span v-else class="person-text">
    <span>{{ person.text }}</span>
    <span v-if="person.suffixText" class="suffixtext"
      >&nbsp;{{ person.suffixText }}</span
    >
    <span
      class="age"
      v-if="addAge && person.birthdate !== null && person.deathdate === null"
      >&nbsp;{{ trans(RENDERBOX_YEARS_OLD, person.age) }}</span
    >
    <span v-else-if="addAge && person.deathdate !== null">&nbsp;(‡)</span>
  </span>
</template>

<script lang="ts" setup>
import { computed, toRefs } from "vue";
import { trans, RENDERBOX_YEARS_OLD } from "translator";
import { AltName, Person } from "ChillPersonAssets/types";

const props = defineProps<{
  person: Person;
  isCut?: boolean;
  addAge?: boolean;
}>();

const { person, isCut = false, addAge = true } = toRefs(props);

const cutText = computed(() => {
  if (!person.value.text) return "";
  const more = person.value.text.length > 15 ? "…" : "";
  return person.value.text.slice(0, 15) + more;
});
</script>
