import ReactMarkdown from "react-markdown";
import styles from "./BlogDetail.module.css";

function BlogDetail({
  title,
  postedOn,
  postedBy,
  tag,
  readTime,
  img,
  content,
}: any) {
  return (
    <article>
      <section className={styles["title-section"]}>
        <p>{title}</p>
        <div className={styles["meta-container"]}>
          <div>
            Posted on <span>{postedOn}</span>
          </div>
          <div>
            By <span>{postedBy}</span>
          </div>
          <div>Published in {tag}</div>
          <div>
            <span>{readTime} min read</span>
          </div>
        </div>
      </section>

      <section className={styles["img-section"]}>
        <img src={img || "https://picsum.photos/1000/400"} alt={title} />
      </section>

      <section className={styles["markdown-section"]}>
        <ReactMarkdown>{content}</ReactMarkdown>
      </section>
    </article>
  );
}

export default BlogDetail;
