import { Head } from "$fresh/runtime.ts";
import { get_pages_meta, PageDescription } from "../pages.ts";
import { Handlers, PageProps } from "$fresh/server.ts";

export const handler: Handlers = {
  async GET(_req, ctx) {
    const [pages, _] = await get_pages_meta();
    return await ctx.render(pages);
  },
};

export default function Home({ data }: PageProps<PageDescription[]>) {
  return (
    <>
      <Head>
        <title>stock-front</title>
      </Head>
      <div class="px-4 py-8 mx-auto bg-[#86efac] min-h-screen">
        <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
          <img
            class="my-6"
            src="/logo.svg"
            width="128"
            height="128"
            alt="the fresh logo: a sliced lemon dripping with juice"
          />
          <h1 class="text-4xl font-bold">Stock</h1>
          <div class="my-4">
            <ul>
              {data.map((x) => (
                <li class="my-2">
                  <a
                    class="p-2 block hover:bg-gray-300 bg-white rounded"
                    href={`/pages/${encodeURIComponent(x.name)}`}
                  >
                    {x.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </>
  );
}
