---
import type { Breadcrumb } from '../lib/content';

interface Props {
    breadcrumbs: Breadcrumb[];
}

const { breadcrumbs } = Astro.props;
const allCrumbs: Breadcrumb[] = [{label: 'Home', href: '/'}, ...breadcrumbs];
const isLast = (i: number) => i === allCrumbs.length - 1;
const parent = allCrumbs.slice(0, -1).reverse().find(c => c.href) || null;
---

{allCrumbs.length > 1 && (
    <nav aria-label="Breadcrumb">
        {/* Mobile: show parent link only */}
        {parent && (
            <a href={parent.href}
               class="lg:hidden inline-flex items-center gap-0.5 -ml-0.5 py-1 pr-2 text-xs text-neutral-600 dark:text-neutral-400 transition interact:text-blue-700 dark:interact:text-blue-300 rounded-sm">
                <i class="icon-[mdi--chevron-left] text-base shrink-0" aria-hidden="true"></i>
                <span class="truncate max-w-[30ch]" set:html={parent.label} />
            </a>
        )}

        {/* Desktop: full breadcrumb trail */}
        <ol class="hidden lg:flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-neutral-600 dark:text-neutral-400">
            {allCrumbs.map((crumb, i) => (
                <li class="flex items-center gap-3">
                    {i > 0 && (
                        <span class="text-neutral-300 dark:text-neutral-700 select-none" aria-hidden="true">/</span>
                    )}
                    {isLast(i) ? (
                        <span class="font-semibold text-neutral-700 dark:text-neutral-300 truncate max-w-[40ch]"
                              aria-current="page"
                              set:html={crumb.label} />
                    ) : crumb.href ? (
                        <a href={crumb.href}
                           class="transition interact:underline interact:text-blue-700 dark:interact:text-blue-300"
                           set:html={crumb.label} />
                    ) : (
                        <span set:html={crumb.label} />
                    )}
                </li>
            ))}
        </ol>
    </nav>
)}
