<!-- لا حاجة للاستيراد، فقط استخدمه -->
<ProductCard :product="item" />

<!-- components/ProductCard.vue -->
<template>
  <div class="product-card">
    <img :src="product.image" :alt="product.name" />
    <h3>{{ product.name }}</h3>
    <p>${{ product.price }} USD</p>
    <button @click="$emit('add-to-cart', product)">Add to Cart</button>
  </div>
</template>

<script setup lang="ts">
interface Product {
  id: number
  name: string
  price: number
  image: string
}

defineProps<{ product: Product }>()
defineEmits<{ 'add-to-cart': [product: Product] }>()
</script>

// Execution Successful

<!-- pages/products/index.vue -->
<template>
  <div>
    <h1>All Products</h1>
    <div class="grid">
      <!-- ProductCard مستورد تلقائيًا -->
      <ProductCard
        v-for="p in products"
        :key="p.id"
        :product="p"
        @add-to-cart="handleAdd"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const { data: products } = await useFetch('/api/products')
function handleAdd(product: any) {
  console.log('Added:', product.name)
}
</script>

// Execution Successful

<!-- app.vue - المكون الجذري مع دعم التخطيط -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<!-- layouts/default.vue -->
<template>
  <div class="layout-default">
    <AppHeader />
    <main class="content">
      <!-- محتوى الصفحة يُعرض هنا -->
      <slot />
    </main>
    <AppFooter />
  </div>
</template>

// Execution Successful

<!-- layouts/sidebar.vue -->
<template>
  <div class="layout-sidebar">
    <AppHeader />
    <div class="main-wrapper">
      <aside class="sidebar">
        <nav>
          <NuxtLink to="/admin">Dashboard</NuxtLink>
          <NuxtLink to="/admin/products">Products</NuxtLink>
          <NuxtLink to="/admin/orders">Orders</NuxtLink>
        </nav>
      </aside>
      <main class="content">
        <slot />
      </main>
    </div>
  </div>
</template>

// Execution Successful

<!-- pages/admin/index.vue -->
<template>
  <div>
    <h1>Admin Dashboard</h1>
    <p>Welcome, Bob</p>
  </div>
</template>

<script setup lang="ts">
// التبديل إلى تخطيط الشريط الجانبي لهذه الصفحة
definePageMeta({
  layout: 'sidebar'
})
</script>

// Execution Successful

<template>
  <div>
    <!-- تحميل فوري - مضمّن في الحزمة الأولية -->
    <AppHeader />

    <!-- تحميل كسول - تقسيم الكود، يُحمل عند أول تصيير -->
    <LazyProductCard
      v-for="p in products"
      :key="p.id"
      :product="p"
    />

    <!-- Lazy مع v-if - يُحمل فقط عندما يكون الشرط صحيحًا -->
    <LazyProductReviewModal
      v-if="showReviewModal"
      :product-id="selectedProductId"
      @close="showReviewModal = false"
    />
  </div>
</template>

// Execution Successful

<template>
  <div>
    <Suspense>
      <template #default>
        <LazyHeavyChart :data="chartData" />
      </template>
      <template #fallback>
        <div class="loading">Loading chart...</div>
      </template>
    </Suspense>
  </div>
</template>

// Execution Successful

<!-- components/ProductCard.vue -->
<script setup lang="ts">
interface Product {
  id: number
  name: string
  price: number
  image: string
  inStock: boolean
}

// Props آمنة النوع مع قيم افتراضية
const props = withDefaults(
  defineProps<{
    product: Product
    showStock?: boolean
    currency?: string
  }>(),
  {
    showStock: true,
    currency: 'USD'
  }
)

// Emits آمنة النوع
const emit = defineEmits<{
  'add-to-cart': [product: Product]
  'toggle-wishlist': [productId: number]
}>()
</script>

<template>
  <div class="card">
    <img :src="product.image" :alt="product.name" />
    <h3>{{ product.name }}</h3>
    <p>{{ product.price }} {{ currency }}</p>
    <p v-if="showStock">
      {{ product.inStock ? 'In Stock' : 'Out of Stock' }}
    </p>
    <button @click="emit('add-to-cart', product)">Add to Cart</button>
    <button @click="emit('toggle-wishlist', product.id)">Wishlist</button>
  </div>
</template>

// Execution Successful

<!-- components/AppHeader.vue -->
<template>
  <header class="app-header">
    <NuxtLink to="/" class="logo">MegaShop</NuxtLink>
    <nav>
      <NuxtLink to="/products">Products</NuxtLink>
      <NuxtLink to="/categories">Categories</NuxtLink>
    </nav>
    <div class="user-area">
      <NuxtLink to="/cart">Cart ({{ cartCount }})</NuxtLink>
      <NuxtLink v-if="isLoggedIn" to="/admin">Admin</NuxtLink>
      <NuxtLink v-else to="/login">Sign In</NuxtLink>
    </div>
  </header>
</template>

<script setup lang="ts">
const cart = useState<any[]>('cart', () => [])
const cartCount = computed(() => cart.value.length)
const isLoggedIn = useState('isLoggedIn', () => false)
</script>

<!-- components/AppFooter.vue -->
<template>
  <footer class="app-footer">
    <p>&copy; 2026 MegaShop. All rights reserved.</p>
    <nav>
      <NuxtLink to="/about">About</NuxtLink>
      <NuxtLink to="/contact">Contact</NuxtLink>
      <NuxtLink to="/privacy">Privacy Policy</NuxtLink>
    </nav>
  </footer>
</template>

<!-- layouts/default.vue -->
<template>
  <div class="layout-default">
    <AppHeader />
    <main>
      <slot />
    </main>
    <AppFooter />
  </div>
</template>