import RichText from "@/app/components/rich-text";
import Image from "next/image";
import AutoPlayVideo from "@/app/components/AutoPlayVideo";

export default function ResultTop({ post }: { post: any }) {
  return (
    <div className="wrapper">
      <div className="flex w-full flex-col items-center justify-between gap-5 md:flex-row">
        <div className="md:50% flex w-full flex-col gap-2">
          <div className="heading-title">{post.theResult.top.heading}</div>
          <div>
            {post.theResult.top.bannerType == "video" && (
              // <video
              //   src={post.theResult.top.bannerSrc}
              //   id="realtest_top_video"
              //   autoPlay
              //   muted
              //   loop
              //   playsInline
              //   className="video-responsive"
              // />
              <AutoPlayVideo
                src={post.theResult.top.bannerSrc}
                className="video-responsive"
              />
            )}
            {post.theResult.top.bannerType == "image" && (
              <Image
                src={post.theResult.top.bannerSrc}
                width={1600}
                height={900}
                alt=""
                className="img-responsive"
              />
            )}
          </div>
        </div>
        <div className="md:50% relative flex w-full flex-col-reverse pt-5 md:flex-col md:pt-20">
          <div className="relative top-0 flex w-full items-end justify-end md:absolute">
            <div className="mx-auto flex w-[75%] flex-col items-center justify-center md:mx-0 md:w-[40%]">
              <Image
                src={post.theResult.top.img1}
                width={600}
                height={900}
                alt=""
                className="img-responsive"
              />
              <div className="font-hasiant relative -top-3 text-5xl">
                <span className="flex -rotate-10">
                  {post.theResult.top.tagline}
                </span>
              </div>
            </div>
          </div>
          <div>
            <div className="font-bogart text-3xl">
              {post.theResult.top.subHeading}
            </div>
            <div className="flex w-full flex-row items-end justify-between gap-4">
              <div className="flex w-[50%]">
                <Image
                  src={post.theResult.top.img2}
                  width={600}
                  height={900}
                  alt=""
                  className="img-responsive"
                />
              </div>
              <div className="w-[50%] text-xs [&>div>p]:mt-8">
                <RichText initialHtml={post.theResult.top.content} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}