// import VirtualTourIcon from "../icons/VirtualTourIcon";
// import Button from "../ui/Button";

import clsx from "clsx";
import { usePopupStore } from "../../stores/usePopupStore";

export interface UnitPopupProps {
  unitType: string;
  square: number;
  block: string;
  floor: string;
}

function UnitPopup({ unitType, square, block, floor }: UnitPopupProps) {
  const { side } = usePopupStore();

  return (
    <div className="bg-[#F7F6F3] 2xl:p-[0.833vw] p-3 2xl:rounded-[1.111vw] md:rounded-2xl rounded-t-2xl relative 2xl:w-[13.958vw] md:w-[176px] w-dvw">
      <div className="2xl:space-y-[0.278vw] space-y-1">
        <p className="subheadline-m [font-family:New_York_Large]">
          {unitType}, <span className="opacity-60">{square} m²</span>
        </p>
        <div className="flex items-center 2xl:gap-[0.556vw] gap-2">
          <p className="caption-s text-[#A7A08E]">{block}</p>
          <div className="bg-[#EAE6DC] rounded-full 2xl:size-[0.208vw] size-[3px]" />
          <p className="caption-s text-[#A7A08E]">{floor}</p>
        </div>
      </div>
      {/* <hr className="border-[#ECE8DF] 2xl:border-[0.069vw] border-[1px]" />
      <div className="flex 2xl:gap-[0.278vw] 2xl:flex-col">
        <Button variant="cta" size={innerWidth >= 768 ? "small" : "large"}>
          Book
        </Button>
        <Button variant="primary" size={innerWidth >= 768 ? "small" : "large"}>
          <div className="2xl:size-[1.111vw] size-4">
            <VirtualTourIcon />
          </div>
          Virtual tour
        </Button>
      </div> */}
      <div
        className={clsx(
          "max-md:hidden absolute 2xl:[border-width:0.556vw_0px_0.486vw_0.556vw] [border-width:8px_0px_7px_8px] [border-color:_transparent_transparent_transparent_#fff]",
          side === "left" &&
            "2xl:top-[calc(50%-0.486vw)] top-[calc(50%-7px)] left-full",
          side === "right" &&
            "2xl:top-[calc(50%-0.486vw)] top-[calc(50%-7px)] right-full scale-x-[-1]",
          side === "top" &&
            "left-[calc(50%-0.486vw)] absolute top-full rotate-90 origin-top-left scale-y-[-1]",
          side === "bottom" &&
            "left-[calc(50%-0.486vw)] absolute bottom-full -rotate-90 origin-bottom-left scale-y-[-1]"
        )}
      />
    </div>
  );
}

export default UnitPopup;
