<template>
    <nav class="flex py-3 text-gray-700 dark:bg-gray-800 relative" aria-label="Breadcrumb">
      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
        <li class="inline-flex items-center">
          <router-link to="/" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
            <font-awesome-icon icon="home" size="xs" class="mr-2" />
            Home
          </router-link>
        </li>
        <li>
          <div class="flex items-center">
            <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
            </svg>
            <router-link to="/products" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white">Products</router-link>
          </div>
        </li>
        <li aria-current="page">
          <div class="flex items-center">
            <svg class="rtl:rotate-180 w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
            </svg>
            <span class="ms-1 text-sm font-bold text-gray-500 md:ms-2 dark:text-gray-400 capitalize">{{ readableCategory }}</span>
          </div>
        </li>
      </ol>
    </nav>
  </template>
  
  <script setup>
    import { useRoute } from 'vue-router';
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
    
    const route = useRoute();
    const category = route.params.category || 'Products';
    
    // Define a mapping object for readable category names
    const categoryMapping = {
        keyboards: 'Keyboards',
        powersupply: 'Power Supply',
        pccase: 'PC Case',
        promotion: 'Promotion',
        // Add other categories here
    };
    
    // Convert the category to a readable format using the mapping object
    const readableCategory = categoryMapping[category] || category;

  </script>
  
  <style scoped>
  /* Add any scoped styles here if needed */
  </style>
  