<template>
  <div style="padding: 20px;">
    <h1>Menu Debug Page</h1>

    <div style="margin: 20px 0; padding: 20px; background: #f0f0f0;">
      <h2>Raw Menu Data:</h2>
      <pre>{{ JSON.stringify(menu, null, 2) }}</pre>
    </div>

    <div style="margin: 20px 0; padding: 20px; background: #e0e0e0;">
      <h2>Menu Items:</h2>
      <ul>
        <li>Home: {{ menu?.home }}</li>
        <li>About: {{ menu?.about }}</li>
        <li>Services: {{ menu?.services }}</li>
        <li>Resume: {{ menu?.resume }}</li>
        <li>Portfolio: {{ menu?.portfolio }}</li>
        <li>Contact: {{ menu?.contact }}</li>
      </ul>
    </div>

    <div style="margin: 20px 0; padding: 20px; background: #d0d0d0;">
      <h2>Test Display:</h2>
      <p>{{ menu?.home || 'Anasayfa' }}</p>
      <p>{{ menu?.about || 'Hakkımda' }}</p>
      <p>{{ menu?.services || 'Hizmetlerim' }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MainMenu } from "~/types";

const config = useRuntimeConfig()
const apiUrl = computed(() => config.public.BASE_API_URL || 'http://127.0.0.1:8000')

const {data: menu} = await useFetch<MainMenu>(`${apiUrl.value}/api/v1/main-menu/`)

console.log('Menu Test Page - menu:', menu.value)
</script>

