import { Handlers, PageProps } from "$fresh/server.ts";
import { query } from "../../db.ts";
import { Page } from "../../components/Page.tsx";

interface Note {
  id: string;
  created_at: Date;
  content: string;
}

export const handler: Handlers<Note> = {
  async GET(request, context) {
    console.debug({ request, context });
    const result = await query(
      "select * from note where id = $1 order by created_at desc",
      [context.params["id"]],
    );
    if (result == null) throw "unable to fetch from database";
    const [note] = result.rows as Note[];
    return await context.render(note);
  },
};

export default function NotesPage(
  { data: { id, created_at, content } }: PageProps<Note>,
) {
  return (
    <Page>
      <h1>Note {id} created at {created_at.toLocaleString()}</h1>
      <div class="my-4" key={id}>
        <blockquote class="mt-2 pl-4 border-l(solid 4)">
          <pre>{content}</pre>
        </blockquote>
      </div>
    </Page>
  );
}