import React, { ReactElement } from "react";
import { ActionMenu } from "@/app/components/action-menu";
import { Metadata } from "next";
import moment from "moment";
import { notFound } from "next/navigation";
import { CodeBlock } from "@/app/components/code-block";
import { Button } from "@/app/components/ui/button";
import Link from "next/link";
import {
  generatePasteMetadata,
  getPaste,
  type Paste,
} from "@/app/common/pastes";
import { PastePageProps } from "@/app/types/paste-page";

export async function generateMetadata({
  params: { id },
}: PastePageProps): Promise<Metadata> {
  return generatePasteMetadata(id);
}

export default async function Paste({
  params: { id },
}: PastePageProps): Promise<ReactElement> {
  const data: Paste | undefined = await getPaste(id);

  if (data == undefined) {
    return notFound();
  }

  const created = moment(data.created)
    .format("MMMM Do YYYY, h:mm:ss a")
    .toString();

  return (
    <div className="relative h-full">
      {/* Action Menu */}
      <ActionMenu>
        <Link href={"/"}>
          <Button>New</Button>
        </Link>
        <Link href={`/raw/${id}`}>
          <Button>Raw</Button>
        </Link>
      </ActionMenu>

      {/* Paste Details */}
      <div className="absolute right-0 bottom-0 text-right p-1.5">
        <p>{data.language}</p>
        <p>{created}</p>
      </div>

      {/* Paste Content */}
      <div className="p-1 !bg-transparent text-sm">
        <CodeBlock code={data.content} language={data.language} />
      </div>
    </div>
  );
}