---
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="back-link">
                <i class="icon-[mdi--chevron-left]" aria-hidden="true"></i>
                <span set:html={parent.label}/>
            </a>
    )}

    {/* Desktop: full breadcrumb trail */}
    <ol role="list">
        {allCrumbs.map((crumb, i) => (
                <li>
                    {i > 0 && (
                            <span aria-hidden="true">/</span>
                    )}
                    {isLast(i) ? (
                            <span aria-current="page" set:html={crumb.label}/>
                    ) : crumb.href ? (
                            <a href={crumb.href} set:html={crumb.label}/>
                    ) : (
                            <span set:html={crumb.label}/>
                    )}
                </li>
        ))}
    </ol>
</nav>
)}

<style>
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.125rem;
        margin-left: -0.125rem;
        padding: 0.25rem 0.5rem 0.25rem 0;
        font-size: 0.875rem;
        color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
        border-radius: 0.125rem;
        text-decoration: none;

        @media (min-width: 1024px) {
            display: none;
        }

        @media (hover: hover) {
            &:hover {
                text-decoration: underline;
                color: light-dark(var(--color-blue-700), var(--color-blue-300));
            }
        }

        &:is(:focus-visible, :active) {
            text-decoration: underline;
            color: light-dark(var(--color-blue-700), var(--color-blue-300));
        }

        i {
            font-size: 1rem;
            flex-shrink: 0;
        }

        span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 30ch;
        }
    }

    [role="list"] {
        display: none;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.25rem;
        font-size: 0.875rem;
        color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
        list-style: none;
        padding: 0;
        margin: 0;

        @media (min-width: 1024px) {
            display: flex;
        }

        li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        [aria-hidden] {
            color: light-dark(var(--color-neutral-300), var(--color-neutral-700));
            user-select: none;
        }

        [aria-current="page"] {
            font-weight: 600;
            color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 40ch;
        }

        a {
            text-decoration: none;

            @media (hover: hover) {
                &:hover {
                    text-decoration: underline;
                    color: light-dark(var(--color-blue-700), var(--color-blue-300));
                }
            }

            &:is(:focus-visible, :active) {
                text-decoration: underline;
                color: light-dark(var(--color-blue-700), var(--color-blue-300));
            }
        }
    }
</style>
