import Link from "next/link";
import fs from "fs";
import path from "path";
import { ArrowDownIcon } from "@heroicons/react/24/outline";

async function getData() {
    let dirs: string[] = [];
    try {
        fs.readdirSync(__dirname).filter((item) => {
            const p = path.resolve(__dirname, item);
            const stat = fs.statSync(p);
            if (stat.isDirectory()) dirs.push(item);
        });
    } catch (e) {
        console.error(e);
    }

    return dirs;
}

export default async function Page() {
    const list = await getData();
    return (
        <div className="flex-1 flex flex-col justify-center items-start">
            <div className="flex justify-center items-center gap-2">
                <span>Components List</span>
                <ArrowDownIcon width={18} height={18} />
            </div>
            <div className="flex flex-col justify-start">
                {list.map((i) => {
                    return (
                        <li key={i}>
                            <Link href={`/components/${i}`}>{i}</Link>
                        </li>
                    );
                })}
            </div>
        </div>
    );
}
