<script setup lang="ts">
  import { computed } from 'vue';
  import { useRoute } from 'vue-router';
  import { RouterLink } from 'vue-router';

  const route = useRoute();

  interface BreadcrumbItem {
    name: string;
    path: string;
  }

  const breadcrumbs = computed<BreadcrumbItem[]>(() => {
    const items: BreadcrumbItem[] = [{ name: 'Home', path: '/' }];

    // Map route names to breadcrumb labels
    const routeLabels: Record<string, string> = {
      'blog-overview': 'Blog',
      'blog-detail': 'Blog',
      about: 'About Us',
      contact: 'Contact',
      'privacy-policy': 'Privacy Policy',
      faq: 'FAQ',
    };

    if (route.name && route.name !== 'home') {
      const routeName = route.name.toString();

      if (routeName === 'blog-detail') {
        // For blog detail pages, add Blog first, then the post title
        items.push({ name: 'Blog', path: '/blog' });

        // Get the post title from route meta or params if available
        const postTitle = (route.meta.title as string) || 'Article';
        items.push({ name: postTitle, path: route.path });
      } else if (routeLabels[routeName]) {
        items.push({ name: routeLabels[routeName], path: route.path });
      }
    }

    return items;
  });

  const shouldShowBreadcrumbs = computed(() => {
    return breadcrumbs.value.length > 1 && route.name !== 'home';
  });
</script>

<template>
  <nav v-if="shouldShowBreadcrumbs" aria-label="Breadcrumb" class="mb-4">
    <ol class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
      <li v-for="(item, index) in breadcrumbs" :key="item.path" class="flex items-center gap-2">
        <RouterLink v-if="index < breadcrumbs.length - 1" :to="item.path" class="hover:text-gray-900 dark:hover:text-white transition-colors" :aria-label="`Navigate to ${item.name}`">
          {{ item.name }}
        </RouterLink>
        <span v-else class="font-medium text-gray-900 dark:text-white" aria-current="page">
          {{ item.name }}
        </span>
        <i v-if="index < breadcrumbs.length - 1" class="fas fa-chevron-right text-xs text-gray-400"></i>
      </li>
    </ol>
  </nav>
</template>
