const WingDescription = () => {
  return (
    <div className="bg-white rounded-lg absolute left-1/2 top-1/2 z-50 p-6 flex flex-col gap-4">
      <div className="relative">
        <div className="flex justify-between border-b pb-4">
          <p className="text-[#0D1922] font-semibold text-[20px]">East Wing</p>
          <div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white">
            234 units
          </div>
        </div>
        <div className="flex flex-col gap-4">
          <div className="flex items-center justify-between gap-8">
            <div className="flex gap-2 items-center">
              <div className="w-6 h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                <p className="h-full w-full flex justify-center items-center">
                  21
                </p>
              </div>
              <p className="text-s text-[#73787C]">Studio Flex</p>
            </div>
            <p className="text-s text-[#0D1922]">AED 1,048,888</p>
          </div>
          <div className="flex items-center justify-between gap-8">
            <div className="flex gap-2 items-center">
              <div className="w-6 h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                <p className="h-full w-full flex justify-center items-center">
                  56
                </p>
              </div>
              <p className="text-s text-[#73787C]">Studio</p>
            </div>
            <p className="text-s text-[#0D1922]">AED 1,138,888</p>
          </div>
          <div className="flex items-center justify-between gap-8">
            <div className="flex gap-2 items-center">
              <div className="w-6 h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                <p className="h-full w-full flex justify-center items-center">
                  89
                </p>
              </div>
              <p className="text-s text-[#73787C]">1 Bedroom</p>
            </div>
            <p className="text-s text-[#0D1922]">AED 1,668,888</p>
          </div>
          <div className="flex items-center justify-between gap-8">
            <div className="flex gap-2 items-center">
              <div className="w-6 h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                <p className="h-full w-full flex justify-center items-center">
                  10
                </p>
              </div>
              <p className="text-s text-[#73787C]">2 Bedroom, Type A</p>
            </div>
            <p className="text-s text-[#0D1922]">AED 2,408,888</p>
          </div>
        </div>
        <div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white rotate-90 absolute top-0 -right-[37px]"></div>
      </div>
    </div>
  );
};

export default WingDescription;
