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

interface BlockPopupProps {
  title: string;
  apartmentsCount: number;
  commercialPremisesCount: number;
}

function BlockPopup({
  title,
  apartmentsCount,
  commercialPremisesCount,
}: BlockPopupProps) {
  return (
    <div className="2xl:space-y-[1.667vw] space-y-6">
      <div className="2xl:space-y-[1.111vw] space-y-4">
        <p className="subheadline-m [font-family:New_York_Large]">{title}</p>
        <hr className="border-[#ECE8DF] 2xl:border-[0.069vw] border-[1px]" />
        <div className="2xl:space-y-[0.556vw] space-y-2">
          <div className="flex 2xl:gap-[0.833vw] gap-3 items-center">
            <div className="bg-[#F47F52] 2xl:rounded-[0.556vw] rounded-lg 2xl:size-[1.667vw] size-6 2xl:text-[0.972vw] text-sm flex justify-center items-center text-white font-medium">
              {apartmentsCount}
            </div>
            <p className="2xl:text-[0.972vw] text-sm">Apartments</p>
          </div>
          <div className="flex 2xl:gap-[0.833vw] gap-3 items-center">
            <div className="bg-[#F47F52] 2xl:rounded-[0.556vw] rounded-lg 2xl:size-[1.667vw] size-6 2xl:text-[0.972vw] text-sm flex justify-center items-center text-white font-medium">
              {commercialPremisesCount}
            </div>
            <p className="2xl:text-[0.972vw] text-sm">Commercial premises</p>
          </div>
        </div>
      </div>
      <Button
        variant="cta"
        size={innerWidth >= 768 ? "medium" : "large"}
        className="w-full"
      >
        Explore
      </Button>
    </div>
  );
}

export default BlockPopup;
