<template>
  <main class="container page-padding text-center">
    <h1>{{ $t('indexPage.welcomeMessage') }}</h1>
    <p class="mb-3">{{ $t('indexPage.mainPageInfo') }}</p>

    <!-- The ExampleComponent is not provided, so this section is a placeholder -->
    <div v-if="todos.length" class="card">
      <div class="card-header">
        <h3>{{ $t('indexPage.sampleTodosHeader') }}</h3>
      </div>
      <div class="card-body">
        <ul class="item-list">
          <li v-for="todo in todos" :key="todo.id" class="list-item">
            <div class="list-item-content">
              <span class="item-text">{{ todo.id }}: {{ todo.content }}</span>
            </div>
          </li>
        </ul>
        <p class="mt-2">{{ $t('indexPage.totalCountLabel') }} {{ meta.totalCount }}</p>
      </div>
    </div>
    <p v-else>{{ $t('indexPage.noTodos') }}</p>
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import type { Todo, Meta } from '@/components/models'; // Adjusted path if models.ts is in the same directory
// import ExampleComponent from 'components/ExampleComponent.vue'; // This component is not provided for conversion

const { t } = useI18n(); // Added for consistency, though not strictly needed if only $t in template

const todos = ref<Todo[]>([
  { id: 1, content: 'ct1' },
  { id: 2, content: 'ct2' },
  { id: 3, content: 'ct3' },
  { id: 4, content: 'ct4' },
  { id: 5, content: 'ct5' },
]);

const meta = ref<Meta>({
  totalCount: 1200,
});
</script>

<style scoped>
.page-padding { padding: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1rem; }
.text-center { text-align: center; }
</style>