import { fetchPageBySlug } from "@/services/payload/page";
import HeroImage from "../HeroImage";
import { RenderBlocks } from "../blocks/RenderBlocks";

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

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

export default function DetailPage({ data, shareUrl }: DetailPageProps) {
  const page = data;
  if (!page) return <></>;

  return (
    <>
      <HeroImage imgSrc={page.heroImg?.url} title={page.data.title} />

      <section className="section section-md bg-colorSection1">
        <div className="container">
          <div className="row justify-content-lg-center">
            <div className="col-12">
              <article className="blog-post-solo">
                <div className="blog-post-solo-part">
                  <RenderBlocks blocks={page.data.layout} />
                </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="#">{page.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>
              </article>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
