const SkygardenDescription = () => {
  return (
    <div className=" p-6">
      <div
        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px] left-[414px] desc-shadow`}
      >
        <div className="relative ">
          <div className="flex justify-between border-b pb-4">
            <p
              className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out `}
            >
              Sky Garden
            </p>
            <div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white">
              17 amenties
            </div>
          </div>
          <div className="flex flex-col gap-4 pt-4">
            <div className="flex items-center justify-between gap-[178px]">
              <p className="text-s text-[#73787C] w-full">Indoor</p>
              <p className="text-s text-[#0D1922] text-nowrap">3 amenties</p>
            </div>
            <div className="flex items-center justify-between">
              <p className="text-s text-[#73787C]">Outdoor </p>

              <p className="text-s text-[#0D1922] text-nowrap">14 amenties</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 -left-[35px]"></div>
        </div>
      </div>
    </div>
  );
};

export default SkygardenDescription;
