irth-new-client/src/components/FloorPopup.tsx

import HumanIcon from "./icons/HumanIcon";
import { AnimatePresence, motion } from "motion/react";

interface FloorMarkerProps {
  title: string | null;
  position: [number, number];
}

function FloorPopup({ title, position }: FloorMarkerProps) {
  return (
    <AnimatePresence>
      {title && (
        <motion.div
          key={title}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          style={{ top: position[1], left: position[0] }}
          className="absolute z-100 2xl:rounded-[1.111vw] 2xl:p-[1.111vw] p-4 rounded-2xl flex flex-col 2xl:gap-[1.111vw] bg-white transition-opacity duration-300 -translate-x-[calc(100%+1.25vw)] -translate-y-1/2 2xl:w-[17.222vw] md:max-2xl:w-70 w-screen"
        >
          <div className="2xl:space-y-[0.556vw]">
            <div className="flex 2xl:gap-[0.556vw] gap-2">
              <p className="font-medium text-h5">
                {Number.isNaN(+title.split(" ").at(-1)!)
                  ? title
                  : `${title.split(" ").at(-1)} floor`}
              </p>
              {!Number.isNaN(+title.split(" ").at(-1)!) && (
                <p className="text-[#0D1922]/40 text-s">
                  {title.split(" ")[0]} Wing
                </p>
              )}
            </div>
            <div className="flex 2xl:gap-[0.278vw] gap-1">
              <p className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#F3F3F2] 2xl:rounded-[0.278vw] rounded text-caption-s text-[#0D1922]/70">
                {title && Number.isNaN((+title!.split(" ").at(-1)!)!)
                  ? "16 Amenties"
                  : `8 apartments`}
              </p>
              {!Number.isNaN(+title.split(" ").at(-1)!) && (
                <div className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#30B216]/8 2xl:rounded-[0.278vw] rounded flex 2xl:gap-[0.278vw] gap-1">
                  <span className="2xl:w-[0.833vw] 2xl:h-[0.833vw] w-3 h-3 text-[#30B216]">
                    <HumanIcon />
                  </span>
                  <p className="text-caption-s text-[#30B216]">Virtual Tour</p>
                </div>
              )}
            </div>
            <hr className="border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
            <div className="2xl:space-y-[0.556vw]">
              {!Number.isNaN(+title.split(" ").at(-1)!) ? (
                <>
                  <div className="flex 2xl:gap-[0.556vw] gap-2">
                    <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
                      4
                    </p>
                    <p className="text-caption-m text-[#0D1922]/70">
                      Studio Flex
                    </p>
                  </div>
                  <div className="flex 2xl:gap-[0.556vw] gap-2">
                    <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
                      4
                    </p>
                    <p className="text-caption-m text-[#0D1922]/70">Studio²</p>
                  </div>
                  <div className="flex 2xl:gap-[0.556vw] gap-2">
                    <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
                      4
                    </p>
                    <p className="text-caption-m text-[#0D1922]/70">
                      1 Bedroom²
                    </p>
                  </div>
                  <div className="flex 2xl:gap-[0.556vw] gap-2">
                    <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
                      2
                    </p>
                    <p className="text-caption-m text-[#0D1922]/70">
                      2 Bedroom²
                    </p>
                  </div>
                </>
              ) : (
                <>
                  <div className="flex 2xl:gap-[0.556vw] gap-2">
                    <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
                      8
                    </p>
                    <p className="text-caption-m text-[#0D1922]/70">
                      Indoor Amenties
                    </p>
                  </div>
                  <div className="flex 2xl:gap-[0.556vw] gap-2">
                    <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
                      8
                    </p>
                    <p className="text-caption-m text-[#0D1922]/70">
                      Outdoor Amenties
                    </p>
                  </div>
                </>
              )}
            </div>
          </div>
          <div className="absolute w-0 h-0 border-[7px_0px_7px_8px] [border-color:_transparent_transparent_transparent_#fff] top-1/2 left-full" />
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default FloorPopup;