<template>
  <div class="container">
    <span class="name">
      <person-text :person="item.result" />
    </span>
    <span class="birthday" v-if="hasBirthdate">
      {{ formatDate(item.result.birthdate?.datetime, "short") }}
    </span>
    <span class="location" v-if="hasAddress">
      {{ item.result.current_household_address?.text }} -
      {{ item.result.current_household_address?.postcode?.name }}
    </span>
  </div>

  <div class="right_actions">
    <badge-entity :entity="item.result" :options="{ displayLong: true }" />
    <on-the-fly type="person" :id="item.result.id" action="show" />
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps } from "vue";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
import { Person, Suggestion } from "ChillPersonAssets/types";

function formatDate(dateString: string | undefined, format: string) {
  if (!dateString) return "";
  // Use Intl.DateTimeFormat or your preferred formatting here
  const date = new Date(dateString);
  if (format === "short") {
    return date.toLocaleDateString();
  }
  return date.toString();
}

const props = defineProps<{
  item: Suggestion & { result: Person };
}>();

const hasBirthdate = computed(() => props.item.result.birthdate !== null);
const hasAddress = computed(
  () => props.item.result.current_household_address !== null,
);
</script>
