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

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

function UnitPopup({ unitType, square, block, floor, number }: UnitPopupProps) {
  return (
    <div className="2xl:space-y-[1.111vw] space-y-4">
      <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 font-medium text-[#A7A08E]">{block}</p>
          <div className="bg-[#EAE6DC] rounded-full 2xl:size-[0.208vw] size-[3px]" />
          <p className="caption font-medium text-[#A7A08E]">{floor}</p>
          <div className="bg-[#EAE6DC] rounded-full 2xl:size-[0.208vw] size-[3px]" />
          <p className="caption font-medium text-[#A7A08E]">{number}</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>
  );
}

export default UnitPopup;
