<script>
import {faArrowLeft} from '@fortawesome/free-solid-svg-icons';
import {Fa} from 'svelte-fa';
import {AppRailAnchor} from '@skeletonlabs/skeleton';

    /**
     * @typedef {Object} Props
     * @property {number} [popCount]
     */

    /** @type {Props} */
    let { popCount = 1 } = $props();
let href = $state();
let pathnameParts = window.location.pathname.split('/');

for(let i = 0; i < popCount; i++) {
    pathnameParts.pop();
}

switch (pathnameParts.length) {
    case 0:
        href = '/'
        break;
    case 1:
        href = `/${pathnameParts[0]}`
        break;
    default:
        href = '/' + pathnameParts.join('/')
        break;
}

</script>

<AppRailAnchor {href} title="Back">
    <div class="flex flex-col gap-2 place-content-center">
        <Fa size={'2x'} icon={faArrowLeft} />
        <p>Back</p>
    </div>
</AppRailAnchor>
