import { usePathname } from "next/navigation"
import { useRouter } from "next/router"
import VideoPopup from "../components/elements/VidepPopup"
import Layout from "../components/layout/Layout"
import Link from "next/link"
export default function Home() {

    let {query} = useRouter()

    return (
        <>
            <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
                <div>
                    <section id="single-post" className="pb-90 inner-page-hero blog-page-section">
                        <div className="container">
                            <div className="row justify-content-center">
                                {/* SINGLE POST CONTENT */}
                                <div className="col-xl-10">
                                    <div className="post-content">
                                        {/*  SINGLE POST TITLE */}
                                        <div className="single-post-title text-center">
                                            {/* Post Tag */}
                                            {/* <span className="post-tag color--green-400">Community</span> */}
                                            {/* Title */}
                                            <h2 className="s-46 w-700">{query.post_title}</h2>
                                            {/* Post Meta */}
                                            <div className="blog-post-meta mt-35">
                                                <ul className="post-meta-list ico-10">
                                                    <li><p className="w-500">MERMS </p></li>
                                                    <li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
                                                    <li><p>{new Date(query?.post_date).toDateString()}</p></li>
                                                </ul>
                                            </div>
                                        </div>	{/* END SINGLE POST TITLE */}
                                        {/* SINGLE POST IMAGE */}
                                        <div className="blog-post-img py-50">
                                            <img className="img-fluid r-16" src={`${query?.image_url}/${query.meta_value}`} alt="blog-post-image" />
                                        </div>
                                        {/* SINGLE POST TEXT */}
                                        <p dangerouslySetInnerHTML={{ __html: query.post_content }} />
                                        {/* END SINGLE POST TEXT */}

                                    </div>
                                </div>	{/* END  SINGLE POST CONTENT */}
                            </div>    {/* End row */}
                        </div>    {/* End container */}
                    </section>	{/* END SINGLE POST */}
                    {/* BLOG-1
			============================================= */}
                    <section id="blog-1" className="bg--white-300 py-100 blog-section division">
                        <div className="container">
                            {/* SECTION TITLE */}
                            <div className="row justify-content-center">
                                <div className="col-md-10 col-lg-9">
                                    <div className="section-title mb-70">
                                        <h2 className="s-50 w-700">Recent Postings</h2>
                                    </div>
                                </div>
                            </div>
                            <div className="row">
                                {/* BLOG POST #1 */}
                                <div className="col-md-6 col-lg-4">
                                    <div id="bp-1-1" className="blog-post wow fadeInUp">
                                        {/* BLOG POST IMAGE */}
                                        <div className="blog-post-img mb-35">
                                            <img className="img-fluid r-16" src="/images/blog/post-8-img.jpg" alt="blog-post-image" />
                                        </div>
                                        {/* BLOG POST TEXT */}
                                        <div className="blog-post-txt">
                                            {/* Post Tag */}
                                            <span className="post-tag color--pink-400">Product News</span>
                                            {/* Post Link */}
                                            <h6 className="s-20 w-700">
                                                <Link href="/single-post">Aliqum mullam porta blandit: tempor sapien and gravida</Link>
                                            </h6>
                                            {/* Text */}
                                            <p>Egestas luctus vitae augue and ipsum ultrice quisque in cursus lacus feugiat congue
                                                diam ultrice laoreet sagittis
                                            </p>
                                            {/* Post Meta */}
                                            <div className="blog-post-meta mt-20">
                                                <ul className="post-meta-list ico-10">
                                                    <li><p className="p-sm w-500">By Helen J.</p></li>
                                                    <li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
                                                    <li><p className="p-sm">Apr 28, 2023</p></li>
                                                </ul>
                                            </div>
                                        </div>	{/* END BLOG POST TEXT */}
                                    </div>
                                </div>	{/* END BLOG POST #1 */}
                                {/* BLOG POST #2 */}
                                <div className="col-md-6 col-lg-4">
                                    <div id="bp-1-2" className="blog-post wow fadeInUp">
                                        {/* BLOG POST IMAGE */}
                                        <div className="blog-post-img mb-35">
                                            <img className="img-fluid r-16" src="/images/blog/post-2-img.jpg" alt="blog-post-image" />
                                        </div>
                                        {/* BLOG POST TEXT */}
                                        <div className="blog-post-txt">
                                            {/* Post Tag */}
                                            <span className="post-tag color--green-400">Community</span>
                                            {/* Post Link */}
                                            <h6 className="s-20 w-700">
                                                <Link href="/single-post">Porttitor cursus fusce egestas CEO cursus at magna sapien
                                                    suscipit and egestas ipsum
                                                </Link>
                                            </h6>
                                            {/* Text */}
                                            <p>Aliqum mullam ipsum vitae and blandit vitae tempor sapien and donec lipsum</p>
                                            {/* Post Meta */}
                                            <div className="blog-post-meta mt-20">
                                                <ul className="post-meta-list ico-10">
                                                    <li><p className="p-sm w-500">By Martex Team</p></li>
                                                    <li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
                                                    <li><p className="p-sm">Apr 14, 2023</p></li>
                                                </ul>
                                            </div>
                                        </div>	{/* END BLOG POST TEXT */}
                                    </div>
                                </div>	{/* END BLOG POST #2 */}
                                {/* BLOG POST #3 */}
                                <div className="col-md-12 col-lg-4">
                                    <div id="bp-1-3" className="blog-post wow fadeInUp">
                                        {/* BLOG POST IMAGE */}
                                        <div className="blog-post-img mb-35">
                                            <img className="img-fluid r-16" src="/images/blog/post-5-img.jpg" alt="blog-post-image" />
                                        </div>
                                        {/* BLOG POST TEXT */}
                                        <div className="blog-post-txt">
                                            {/* Post Tag */}
                                            <span className="post-tag color--purple-400">Freelancer Tips</span>
                                            {/* Post Link */}
                                            <h6 className="s-20 w-700">
                                                <Link href="/single-post">Cubilia laoreet augue egestas and Martex magna impedit</Link>
                                            </h6>
                                            {/* Text */}
                                            <p>Luctus vitae egestas augue and ipsum ultrice quisque in cursus lacus feugiat egets
                                                congue ultrice sagittis laoreet
                                            </p>
                                            {/* Post Meta */}
                                            <div className="blog-post-meta mt-20">
                                                <ul className="post-meta-list ico-10">
                                                    <li><p className="p-sm w-500">By Miranda Green</p></li>
                                                    <li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
                                                    <li><p className="p-sm">Mar 27, 2023</p></li>
                                                </ul>
                                            </div>
                                        </div>	{/* END BLOG POST TEXT */}
                                    </div>
                                </div>	{/* END BLOG POST #3 */}
                            </div>    {/* End row */}
                        </div>    {/* End container */}
                    </section>
                </div>

            </Layout>
        </>
    )
}