import { Handlers, PageProps } from "$fresh/server.ts";
import { MainLayout } from "@components/layouts/main.tsx";
import { Movie } from "@lib/movies.ts";
import { getMovie } from "../api/movies/[name].ts";
import { RecipeHero } from "@components/RecipeHero.tsx";
import { KMenu } from "@islands/KMenu.tsx";

export const handler: Handlers<Movie | null> = {
  async GET(_, ctx) {
    const movie = await getMovie(ctx.params.name);
    return ctx.render(movie);
  },
};

export default function Greet(props: PageProps<Movie>) {
  const movie = props.data;

  return (
    <MainLayout url={props.url}>
      <RecipeHero data={movie} backlink="/movies" />
      <KMenu type="main" context={movie} />
      <div class="px-8 text-white mt-10">
        <pre
          class="whitespace-break-spaces"
          dangerouslySetInnerHTML={{ __html: movie.description || "" }}
        >
          {movie.description}
        </pre>
      </div>
    </MainLayout>
  );
}