---
import type { BreadcrumbItem } from "@/types/Map";

interface Props {
    breadcrumbs?: BreadcrumbItem[];
}

const { breadcrumbs = [] } = Astro.props
---

{breadcrumbs.length > 0 &&
    <nav>
        <menu>
            {breadcrumbs.map((breadcrumb, index) => (
                <li>
                    {index === breadcrumbs.length - 1 &&
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Z"></path></svg>

                        <span class="breadcrumb" aria-current="page">
                            <span class="label">
                                {breadcrumb.name}
                            </span>
                        </span>
                    }
                    {!(index === breadcrumbs.length - 1) &&
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>

                        <a href={breadcrumb.url} class="breadcrumb" class:list={{ active: index === breadcrumbs.length - 1 }}>
                            <span class="label">
                                {breadcrumb.name}
                            </span>
                        </a>

                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#0f172a" viewBox="0 0 256 256"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>
                    }
                </li>
            ))}
        </menu>
    </nav>
}

<style lang="scss">
menu {
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .5rem;
    padding-block: .25rem;
    padding-inline: .8rem;
    border: 1px solid var(--slate-400);
    background: var(--white);
    border-radius: 100vmax;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    pointer-events: all;

    li {
        display: flex;
        align-items: center;
        gap: .25ch;

        &:has(a:hover, a:focus-visible) {
            svg.folder {
                fill: var(--blue-500);
            }
        }
    }

    .breadcrumb {
        display: inline-flex;
        align-items: center;
        gap: .5ch;
        font-weight: 600;
        font-size: .85em;
        white-space: nowrap;
        outline: .2rem solid transparent;
        transition-property: color, background-color, border-color, outline-color;
        transition-duration: .15s;
        transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);

        @media screen and (width < 900px) {
            font-size: .76em;
        }

        .icon {
            width: 1.1em;
        }

        .label {
            text-underline-offset: .15rem;
        }

        &:is(a) {
            cursor: pointer;

            &:hover,
            &:focus-visible {
                .label {
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>