"use client";
import React, { useState } from "react";
import RichText from "@/app/components/rich-text";
import Image from "next/image";
import AutoPlayVideo from "@/app/components/AutoPlayVideo";

export default function Intro({ post }: { post: any }) {
  const [showMe, setShowMe] = useState(false);
  function toggle() {
    setShowMe(!showMe);
  }
  return (
    <div className="wrapper pt-10 pb-0 md:pt-25">
      <div className="mx-auto flex w-full flex-col md:w-[90%]">
        <div className="flex w-full flex-col-reverse items-end justify-between gap-4 md:flex-row md:gap-0">
          <div
            className="flex w-full text-xs md:w-[40%] [&>div>span]:font-medium"
            style={{ color: post.theme.textColorDark }}
          >
            <RichText initialHtml={post.intro.subHeading} />
          </div>
          <div
            className="font-bogart flex items-end justify-end text-3xl md:w-[25%] md:text-right"
            style={{ color: post.theme.textColorDark }}
          >
            {post.intro.heading}
          </div>
        </div>
      </div>
      <div className="flex w-full flex-col items-start justify-between pt-4 md:flex-row md:gap-5">
        <div className="flex w-full md:w-[30%]">
          <div className="relative z-20 flex w-full flex-col">
            <div className="flex w-full items-end justify-end">
              <div className="absolute -top-8 -right-4 inline-flex h-36 w-36 md:-top-1 md:-right-[20%] md:h-50 md:w-50">
                <Image
                  src={post.intro.collageImg.img1}
                  width={400}
                  height={400}
                  alt=""
                  className="img-responsive"
                />
              </div>
            </div>
            <div className="flex w-full pt-0 pr-[25%] md:pt-25 md:pr-[10%]">
              <Image
                src={post.intro.collageImg.img2}
                width={400}
                height={400}
                alt=""
                className="img-responsive"
              />
            </div>
            <div className="relative -top-[15%] flex w-full pl-[20%] md:-top-[16%] md:pl-[10%]">
              <Image
                src={post.intro.collageImg.img3}
                width={400}
                height={400}
                alt=""
                className="img-responsive"
              />
            </div>
          </div>
        </div>
        <div className="relative flex w-full flex-col-reverse md:w-[70%] md:flex-col md:pr-[5%]">
          <div>
            {post.intro.banner.type == "video" && (
              <AutoPlayVideo
                src={post.intro.banner.src}
                className="video-responsive"
              />
            )}
            {post.intro.banner.type == "image" && (
              <Image
                src={post.intro.banner.src}
                width={1600}
                height={900}
                alt=""
                className="img-responsive"
              />
            )}
          </div>
          <div className="relative -top-10 right-5 flex justify-end md:-top-16">
            <div className="relative flex w-full items-start pt-10 md:pt-22">
              <div
                className="relative left-5 z-10 inline-flex -rotate-4 border-1 border-dashed bg-white/25 px-4 py-2 text-xs font-medium duration-300 hover:cursor-pointer hover:bg-white md:left-10"
                style={{ color: post.theme.textColorDark }}
                onMouseEnter={toggle}
                onMouseLeave={toggle}
              >
                {post.intro.linkText}
              </div>
              {showMe && (
                <div
                  className="absolute top-20 left-11 z-50 flex w-full border-1 border-dashed p-4 duration-300 md:top-33 md:w-80"
                  style={{
                    color: post.theme.textColorDark,
                    backgroundColor: post.theme.bgColor,
                  }}
                >
                  <div className="flex w-full flex-col items-center justify-center text-center">
                    <Image
                      src={post.intro.showHintContent.hintImg}
                      width={600}
                      height={400}
                      alt=""
                      className="img-responsive"
                    />
                    <div className="font-bogart mt-2 text-xl">
                      {post.intro.showHintContent.hintHeading}
                    </div>
                    <div className="text-xs [&>div>p]:my-2">
                      <RichText
                        initialHtml={post.intro.showHintContent.hintText}
                      />
                    </div>
                  </div>
                </div>
              )}
            </div>
            <div className="z-20 inline-flex h-20 w-24 md:h-34 md:w-40">
              <Image
                src={post.intro.motifImg}
                width={400}
                height={400}
                alt=""
                className="img-responsive"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}