import { fetchBlogDetail } from "@/services/payload/blog";
import Image from "next/image";
import ListOfRecentBlog from "./ListOfRecentBlog";
import HeroImage from "../HeroImage";
import { RichText } from "@payloadcms/richtext-lexical/react";

type shareUrlDestination = "facebook" | "linkedin" | "twitter";

type DetailPageBlogProps = {
  data: Awaited<ReturnType<typeof fetchBlogDetail>>;
  shareUrl: Record<shareUrlDestination, string>;
};

export default function DetailPageBlog({ data, shareUrl }: DetailPageBlogProps) {
  const blog = data;
  if (!blog) return <></>;

  return (
    <>
      <HeroImage title={blog.data.title} />

      <section className="section section-md bg-colorSection1">
        <div className="container">
          <div className="row justify-content-lg-center">
            <div className="col-lg-8">
              <article className="blog-post-solo">
                <div className="blog-post-solo-part">
                  <div className="w-full h-56 md:h-80 bg-colorImgPlaceholder/50 relative">
                    <Image className="object-cover" src={blog.img.url} alt={blog.img.alt} fill />
                  </div>

                  <RichText className="mt-4" data={blog.data.content} />
                </div>

                <div className="blog-post-solo-footer">
                  <div className="blog-post-solo-footer-left">
                    <ul className="blog-post-solo-footer-list">
                      <li>
                        <span className="icon mdi mdi-clock"></span>
                        <a href="#">{blog.createdAt}</a>
                      </li>
                    </ul>
                  </div>
                  <div className="blog-post-solo-footer-right">
                    <ul className="blog-post-solo-footer-list-1">
                      <li>
                        <span>Share this post</span>
                      </li>
                      <li>
                        <a
                          target="_blank"
                          className="icon icon-circle icon-rounded icon-5 fa-facebook"
                          href={shareUrl.facebook}
                        ></a>
                      </li>
                      <li>
                        <a
                          target="_blank"
                          className="icon icon-circle icon-rounded icon-6 fa-twitter"
                          href={shareUrl.twitter}
                        ></a>
                      </li>
                      <li>
                        <a
                          target="_blank"
                          className="icon icon-circle icon-rounded icon-4 fa-linkedin"
                          href={shareUrl.linkedin}
                        ></a>
                      </li>
                    </ul>
                  </div>
                </div>

                <ListOfRecentBlog currentBlogId={blog?.data?.id} />
              </article>
            </div>

            {/* Sidebar */}
            <div className="col-lg-4">
              <div className="pdl-xl-40">
                <div className="row row-60">
                  <div className="col-md-6 col-lg-12">
                    <form action="/blog" className="form-lg rd-search rd-search-classic">
                      <div className="form-wrap">
                        <input
                          className="form-input"
                          id="rd-search-form-input"
                          type="text"
                          name="s"
                          autoComplete="off"
                          placeholder="Search blog..."
                        />
                      </div>
                      <button className="rd-search-submit" type="submit"></button>
                    </form>
                  </div>
                  <div className="col-md-6 col-lg-12">
                    <div className="block-info-2">
                      <div className="block-info-2-title">
                        <h3>Latest Listings</h3>
                      </div>
                      <a className="post-minimal-1" href="#">
                        <div className="post-minimal-1-left">
                          <Image src="/images/post-agent-01-212x208.jpg" alt="" width="212" height="208" />
                        </div>
                        <div className="post-minimal-1-body">
                          <div className="post-minimal-1-title">
                            <span>401 Biscayne Blvd</span>
                          </div>
                          <div className="post-minimal-1-text">
                            <span>$5000\mo</span>
                          </div>
                        </div>
                      </a>
                      <a className="post-minimal-1" href="#">
                        <div className="post-minimal-1-left">
                          <Image src="/images/post-agent-02-212x208.jpg" alt="" width="212" height="208" />
                        </div>
                        <div className="post-minimal-1-body">
                          <div className="post-minimal-1-title">
                            <span>35 Pond St, New York</span>
                          </div>
                          <div className="post-minimal-1-text">
                            <span>$5550\mo</span>
                          </div>
                        </div>
                      </a>
                      <a className="post-minimal-1" href="#">
                        <div className="post-minimal-1-left">
                          <Image src="/images/post-agent-03-212x208.jpg" alt="" width="212" height="208" />
                        </div>
                        <div className="post-minimal-1-body">
                          <div className="post-minimal-1-title">
                            <span>182 3rd St, Seattle</span>
                          </div>
                          <div className="post-minimal-1-text">
                            <span>$2520\mo</span>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}