<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import DirectoryGrid from '@/components/directory/DirectoryGrid.vue'
import { mockDirectoryItems } from '@/data/directory'

const { t } = useI18n()

// Use the imported mock data
const items = mockDirectoryItems
</script>

<template>
  <div class="container mx-auto px-4 py-8">
    <div class="space-y-8">
      <!-- Directory Header -->
      <div class="text-center">
        <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
          {{ t('directory.title') }}
        </h1>
        <p class="mt-4 text-lg text-muted-foreground">
          {{ t('directory.subtitle') }}
        </p>
      </div>

      <!-- Directory Grid -->
      <DirectoryGrid :items="items" />
    </div>
  </div>
</template>
