import { Head, asset } from "$fresh/runtime.ts";
import { join } from "path/posix.ts";
import { ComponentChild } from "preact";


function stairs(path: string){
    if (path === ".") return [];
    const uplist = path.split("/");
    let current = ".";
    const stairs = [];
    for (const up of uplist){
        current = join(current, up);
        stairs.push([current, up]);
    }
    return stairs;
}

export default function UpList(props:{path: string}) {
    const data = props;
    const uplist = stairs(data.path);
    
    return (<div>
        <h1 class={"text-2xl flex flex-wrap"}> 
            <a href="/dir/" class="flex flex-wrap p-2 hover:bg-gray-400 rounded-sm">
                <img src={asset("/icon/house.svg")}/>
                <span class="ml-1">Home</span></a>
            {
            uplist.map(([cur, up], i) => (
                <>
                    <span class="p-2">/</span>
                    <a class="flex flex-wrap p-2 hover:bg-gray-400 rounded-sm" href={`/dir/${cur}`}>
                        <img src={asset("/icon/folder.svg")} />
                        <span class="ml-1">{up}</span>
                    </a>
                </>
            ))
        }</h1>
    </div>)
}