import BlogComments from "@/components/BlogComments";
import BlogWidget from "@/components/BlogWidget";
import CommentForm from "@/components/CommentForm";
import { allBlogs } from "@/data/blogs";
import payloadConfig from "@/payload.config";
import Image from "next/image";
import { getPayload } from "payload";

export const metadata = {
  title:
    "Slick Blogs Single || Resonance — One & Multi Page React Nextjs Creative Template",
  description:
    "Resonance — One & Multi Page React Nextjs Creative Template",
};

export default async function BlogRead({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const slug = (await params).slug;
  const payload = await getPayload({ config: payloadConfig });
  const blogData = await payload.find({
    collection: "blogs",
    where: {
      slug: { equals: slug },
    },
    pagination: false,
  });
  console.log("data", blogData);

  const blog = allBlogs.filter((elm) => elm.id == 34)[0] || allBlogs[0];
  return (
    <>
      <section
        className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
        id="home"
      >
        {/* <!-- Background Shape --> */}
        <div className="bg-shape-1 wow fadeIn">
          <Image
            src="/assets/images/demo-fancy/bg-shape-1.svg"
            width={1443}
            height={844}
            alt=""
          />
        </div>
        {/* <!-- End Background Shape --> */}

        <div className="container position-relative pt-sm-40 text-center">
          <div className="row">
            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
              <h1 className="hs-title-10 mb-10 wow fadeInUp">
                {/* @ts-ignore */}
                {blog?.title || blog?.postTitle}
              </h1>
              {/* Author, Categories, Comments */}
              <div
                className="blog-item-data mb-0 wow fadeIn"
                data-wow-delay="0.2s"
              >
                <div className="d-inline-block me-3">
                  <a href="#">
                    <i className="mi-clock size-16" />
                    <span className="visually-hidden">Date:</span> December 25
                  </a>
                </div>
                <div className="d-inline-block me-3">
                  <a href="#">
                    <i className="mi-user size-16" />
                    <span className="visually-hidden">Author:</span> John Doe
                  </a>
                </div>
                <div className="d-inline-block me-3">
                  <i className="mi-folder size-16" />
                  <span className="visually-hidden">Categories:</span>
                  <a href="#">Design</a>, <a href="#">Branding</a>
                </div>
                <div className="d-inline-block me-3">
                  <a href="#">
                    <i className="mi-message size-16" /> 5 Comments
                  </a>
                </div>
              </div>
              {/* End Author, Categories, Comments */}
            </div>
          </div>
        </div>
      </section>
      <>
        {/* Section */}
        <section className="page-section">
          <div className="container relative">
            <div className="row">
              {/* Content */}
              <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                {/* Post */}
                <div className="blog-item mb-80 mb-xs-40">
                  <div className="blog-item-body">
                    <div className="mb-40 mb-xs-30">
                      <Image
                        src="/assets/images/demo-fancy/blog/post-prev-3-large.jpg"
                        alt="Image Description"
                        width={1350}
                        height={759}
                        className="round"
                      />
                    </div>
                    <p>
                      Morbi lacus massa, euismod ut turpis molestie, tristique
                      sodales est. Integer sit amet mi id sapien tempor molestie
                      in nec massa. Fusce non ante sed lorem rutrum feugiat.
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      Mauris non laoreet dui. Morbi lacus massa, euismod ut
                      turpis molestie, tristique sodales est. Integer sit amet
                      mi id sapien tempor molestie in nec massa.
                    </p>
                    <p>
                      Fusce non ante sed lorem rutrum feugiat. Vestibulum
                      pellentesque, purus ut&nbsp;dignissim consectetur, nulla
                      erat ultrices purus, ut&nbsp;consequat sem elit non sem.
                      Morbi lacus massa, euismod ut turpis molestie, tristique
                      sodales est. Integer sit amet mi id sapien tempor molestie
                      in nec massa. Fusce non ante sed lorem rutrum feugiat.
                    </p>
                    <blockquote>
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Integer posuere erat a&nbsp;ante. Vestibulum
                        pellentesque, purus ut dignissim consectetur, nulla erat
                        ultrices purus.
                      </p>
                      <footer>
                        Someone famous in
                        <cite title="Source Title"> Source Title </cite>
                      </footer>
                    </blockquote>
                    <p>
                      Praesent ultricies ut ipsum non laoreet. Nunc ac
                      <a href="#">ultricies</a> leo. Nulla ac ultrices arcu.
                      Nullam adipiscing lacus in consectetur posuere. Nunc
                      malesuada tellus turpis, ac pretium orci molestie vel.
                      Morbi lacus massa, euismod ut turpis molestie, tristique
                      sodales est. Integer sit amet mi id sapien tempor molestie
                      in nec massa. Fusce non ante sed lorem rutrum feugiat.
                    </p>
                    <ul>
                      <li>First item of the list</li>
                      <li>Second item of the list</li>
                      <li>Third item of the list</li>
                    </ul>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      Mauris non laoreet dui. Morbi lacus massa, euismod ut
                      turpis molestie, tristique sodales est. Integer sit amet
                      mi id sapien tempor molestie in nec massa. Fusce non ante
                      sed lorem rutrum feugiat. Vestibulum pellentesque, purus
                      ut&nbsp;dignissim consectetur, nulla erat ultrices purus,
                      ut&nbsp;consequat sem elit non sem.
                    </p>
                  </div>
                </div>
                {/* End Post */}
                {/* Comments */}
                <div className="mb-80 mb-xs-40">
                  <h4 className="blog-page-title">
                    Comments <small className="number">(3)</small>
                  </h4>
                  <ul className="media-list comment-list clearlist">
                    <BlogComments />
                  </ul>
                </div>
                {/* End Comments */}
                {/* Add Comment */}
                <div className="mb-80 mb-xs-40">
                  <h4 className="blog-page-title">Leave a comment</h4>
                  {/* Form */}
                  <CommentForm />
                  {/* End Form */}
                </div>
                {/* End Add Comment */}
                {/* Prev/Next Post */}
                <div className="clearfix mt-40">
                  <a href="#" className="blog-item-more circle left">
                    <i className="mi-chevron-left" />
                    &nbsp;Prev post
                  </a>
                  <a href="#" className="blog-item-more circle right">
                    Next post&nbsp;
                    <i className="mi-chevron-right" />
                  </a>
                </div>
                {/* End Prev/Next Post */}
              </div>
              {/* End Content */}
            </div>
          </div>
        </section>
        {/* End Section */}
        {/* Divider */}
        <hr className="mt-0 mb-0" />
        {/* End Divider */}
        {/* Section */}
        <section className="page-section">
          <div className="container relative">
            <div className="row mt-n60">
              <BlogWidget
                inputClass="newsletter-field form-control input-md circle mb-10"
                btnClass="btn btn-mod btn-color btn-medium btn-circle btn-hover-anim form-control"
              />
            </div>
          </div>
        </section>
      </>
    </>
  );
}