<script setup lang="ts">
// Define props with proper TypeScript typing
import { computed } from "vue";
import type { CountryListItemType } from "@/utils/countries.ts";

type ListItem<T> = {
  raw: T;
}

// Define props with proper TypeScript typing
const props = defineProps<{
  item: ListItem<CountryListItemType>;
  itemProps?: Record<string, unknown>;
}>();

// Helper functions to check the type of the item
const isDivider = computed(() => {
  return "divider" in props.item.raw && props.item.raw.divider;
});

const headerText = computed(() => {
  return "header" in props.item.raw ? props.item.raw.header : "";
});

const countryItem = computed(() => {
  return !isDivider.value && !headerText.value && "country" in props.item.raw ? props.item.raw : undefined;
});

</script>

<template>
  <v-divider
    v-if="isDivider"
    class="my-2"
  />
  <v-list-subheader v-if="headerText">
    {{ headerText }}
  </v-list-subheader>
  <v-list-item
    v-if="countryItem"
    v-bind="itemProps"
    :title="countryItem.country"
  />
</template>
