<%- include('./header') %>
<main class="container mx-auto my-10">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">
      Categories
    </h1>
  
    <!-- Category Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <% if (categories && categories.length > 0) { %>
        <% categories.forEach(category => { %>
          <div class="bg-white shadow-lg rounded-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300">
            <!-- Category Image (if available) -->
            <div class="h-48 w-full bg-gray-300 flex justify-center items-center">
              <span class="text-2xl font-semibold text-gray-700"><%= category.name %></span>
            </div>
  
            <!-- Category Details -->
            <div class="p-4">
              <h2 class="text-lg font-semibold text-gray-800"><%= category.name %></h2>
              <p class="text-gray-600">Explore <%= category.products.length %> products</p>
  
              <!-- View Products Button -->
              <a href="/categories/<%= category._id %>" class="mt-4 block text-center bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors duration-300">
                View Products
              </a>
            </div>
          </div>
        <% }) %>
      <% } else { %>
        <p class="text-gray-500 text-lg">No categories available.</p>
      <% } %>
    </div>
  </main>
  
<%- include('./footer') %>