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

export const handler: Handlers = {
  async GET(_req, ctx) {
    const [pages, _] = await get_pages_meta();
    const name = ctx.params.name;
    const page = pages.filter(x=> x.name === name);
    if (page.length === 0) {
      return await ctx.renderNotFound();
    }
    return await ctx.render(page[0]);
  },
};

export default function Pages(props: PageProps<PageDescription>) {
  return <>
    <Head>
        <title>Stock: {props.params.name}</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="/stockgraph.svg"
            width="128"
            height="128"
            alt="stock graph"
          />
        <h1 class="text-4xl">{props.params.name}</h1>
        <p>{props.data.description}</p>
        <StockList pageName={props.params.name}></StockList>
      </div>
    </div>
  </>
}
