import Layout from "../components/layout";
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import type { Post } from "../utils/types";

export default function Post() {
  const [post, setPost] = useState<Post | null>(null);
  const params = useParams();

  useEffect(() => {
    if (params.slug) {
      fetch("/api/posts/" + params.slug, {
        method: "GET",
        credentials: "include",
      }).then(async (res) => {
        if (res.ok) {
          const data = await res.json();
          setPost(data);
        } else {
          console.error("Failed to load post! " + res.status);
        }
      });
    }
  }, []);

  useEffect(() => {
    console.log(post);
  }, [post]);

  if (post) {
    return (
      <Layout>
        <div className="my-2">
          <h1 className="text-2xl font-bold">{post.title}</h1>
          <p className="text-sm opacity-50">{post.description}</p>
        </div>
      </Layout>
    );
  }
}