<script context="module" lang="ts">
  export interface Breadcrumb {
    label: string;
    href: string;
  }

  export function generateBreadcrumbs(pathname: string): Breadcrumb[] {
    const segments = pathname.split('/').filter(Boolean);
    const crumbs: Breadcrumb[] = [{ label: 'Home', href: '/dashboard' }];

    let current = '';
    for (const segment of segments) {
      current += `/${segment}`;
      crumbs.push({
        label: segment
          .split('-')
          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
          .join(' '),
        href: current
      });
    }

    return crumbs;
  }
</script>

<script lang="ts">
  import { page } from '$app/stores';
  import { Home } from 'lucide-svelte';

  $: crumbs = generateBreadcrumbs($page.url.pathname);
</script>

<nav class="breadcrumbs text-sm" aria-label="Breadcrumb" data-testid="breadcrumbs">
  <ul>
    {#each crumbs as crumb, i (crumb.href + '-' + i)}
      <li>
        {#if i === 0}
          <a href={crumb.href} aria-label="Home">
            <Home size={16} />
          </a>
        {:else if i === crumbs.length - 1}
          <span class="font-medium">{crumb.label}</span>
        {:else}
          <a href={crumb.href}>{crumb.label}</a>
        {/if}
      </li>
    {/each}
  </ul>
</nav>
