import { useRouter } from "next/router";
import React, { FC, useEffect, useState } from "react";
import { baseUrl } from "../../constants/urls";
import { blogData, blogDatas } from "../../mockData/blogpost";
import styles from "./blogPage.module.scss";
import Head from 'next/head';
import SEOHead from "../SEOHead";

const BlogPage: FC<any> =(props) => {
  
    const [blogPageData, setBlogPageData] = useState<blogData>();

    useEffect(() => {
      setBlogPageData(blogDatas.find((item: any) => item.urlTitle == props.pageId));
    }, [props]);
    
    

    const router = useRouter();

  return (
    <>
      <SEOHead
        title={blogPageData?.title|| "Blog"}
        description={blogPageData?.description}
        url={window.location.href} 
        image={`${baseUrl}/storage/${router?.query?.name}`}
      />
      <section className={styles.blogpost_header}>
        <h1 className={styles.blogpost_headertitle}>
          {/* <span> */}
            {blogPageData?.title}
          {/* </span> */}
        </h1>
        <div className={styles.blogpost_headerinfo}>
          <div className={styles.blogpost_author}>
            <a className={styles.blogpost_headerauthor} href="https://www.indispare.com/" target="_blank" rel="noreferrer">Posted By: Indispare</a>
          </div>
          <div className={styles.blogpost_headerdates}>
            <p className={styles.blogpost_headerdatespublished}>
              Published:
              <time dateTime="2022-13-12"> {blogPageData?.date}</time>
            </p>
          </div>
        </div>
      </section>
      <div className={styles.blogpost_body}>
        <span>
          <div style={{padding:"1em 0"}} className=" flex justify-center">
            <img src={`${baseUrl}/storage/${router?.query?.name}`} alt={blogPageData?.title} title={`${baseUrl}/storage/${router?.query?.name}`} style={{width:"100%"}}/>
          </div>
          <p dangerouslySetInnerHTML={{__html: blogPageData?.description}}/>
        </span>
      </div>
    </>
  );
};

export default BlogPage;