import { createSignal, For, Show } from "solid-js";
import {
  cache,
  createAsync,
  A,
  type RouteDefinition,
  useParams,
} from "@solidjs/router";

const getPost = cache(async (slug) => {
  "use server";
  return await fetch(`https://content.dd-ix.net/news/en/${slug}`).then((data) =>
    data.json()
  );
}, "news-post");

export const route = {
  load: ({ params }) => {
    getPost(params.slug);
  },
} satisfies RouteDefinition;

export default () => {
  const params = useParams();
  const post = createAsync(() => getPost(params.slug));

  return (
    <main>
      <div class="relative">
        <img
          src={`https://content.dd-ix.net/news/assets/${post()?.image}`}
          alt={post()?.title}
          class="min-h-[30vh] max-h-[70vh] w-full object-cover"
        />
        {/* <h1 class="absolute bottom-0 left-0 p-4 backdrop-blur text-white drop-shadow-md bg-gray-800/40">{post()?.title}</h1> */}
      </div>
      <div class="container mx-auto p-4">
        <article>
          <h1>{post()?.title}</h1>
          <p>
            {post()?.published} by {post()?.authors.join(", ")}
          </p>
          <div innerHTML={post()?.body} />
        </article>
      </div>
    </main>
  );
};