<?php
/**
 * Example: How to use the product card component
 * مثال: كيفية استخدام مكون كارت المنتج
 */

// في أي صفحة تعرض منتجات (index.php, products.php, etc.)

// 1. أضف CSS في الـ head
?>
<link rel="stylesheet" href="assets/css/product-cards.css">
<?php

// 2. استدعي المكون
require_once 'includes/product-card.php';

// 3. اعرض المنتجات
?>
<div class="products-grid">
    <?php foreach ($products as $product): ?>
        <?php renderProductCard($product, $currency_symbol); ?>
    <?php endforeach; ?>
</div>
<?php

// CSS للـ grid
?>
<style>
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 20px;
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
</style>