import { format } from "date-fns";
import { typographicText } from "@/lib/typography";

const BlogPost = ({
  post,
  children,
}: {
  post: any;
  children: React.ReactNode;
}) => {
  const { title, pubDate } = post.data;
  const displayTitle = typographicText(title);

  return (
    <section className="container px-6 py-2 md:py-6">
      <article className="poetry-post mx-auto">
        <h1 className="poetry-post-title">{displayTitle}</h1>
        <div className="poetry-post-meta">
          <time dateTime={pubDate.toISOString()}>
            {format(pubDate, "MMMM d, yyyy")}
          </time>
        </div>
        <div className="poetry-post-body">{children}</div>
      </article>
    </section>
  );
};

export { BlogPost };
