import React from 'react';

interface PostProps {
  // HTML string for the blog post body
  children: string;
  meta: {
    title: string;
    date: Date;
    readingTime: string;
  };
}

export function Post({ children, meta }: PostProps) {
    return (
        <main>
          <article className="blog-post">
            <header className="post-header">
              <h1>{meta.title}</h1>
              <div className="post-meta">
                {meta.date && meta.date instanceof Date &&
                  <>

                    <time dateTime={meta.date.toISOString()}>
                      {meta.date.toLocaleDateString('en-US', {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                      })}
                    </time>
                  </>
                }

                {meta.readingTime &&
                  <>
                    <span className="meta-separator">•</span>
                    <span>{meta.readingTime}</span>
                  </>
                }
              </div>
            </header>
            <div className="post-content" dangerouslySetInnerHTML={{ __html: children }} />
          </article>
        </main>
    )
}