export function ProductReview() {
  return (
    <div className="p-[15px] bg-white mt-5 rounded-[8px]">
      <div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
        <h3 className="text-xl font-bold">Đánh giá trên internet</h3>
        <div className="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
          <select
            name=""
            id=""
            className=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
          >
            <option value="">Top review</option>
            <option value="">Review mới nhất</option>
          </select>
          <i className="icon_2025 angle-right  ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
        </div>
      </div>

      <div className="flex gap-[25px]">
        <div className="left w-[20%]">
          <b className="text-center block pt-[20px] pb-[5px] text-2xl">
            54 đánh giá
          </b>
          <div className="flex items-center justify-center">
            <i className="icon-star star4"></i>
            <span className="ml-[5px] mt-[3px]">4.8</span>
          </div>
          <div className="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
            <div className="flex items-center justify-between mb-[10px]">
              <span>
                Hanoicomputer{" "}
                <a href="" className="ml-[5px] text-[#1877F2]">
                  (240)
                </a>
              </span>
              <i className="icon-star star5"></i>
            </div>
            <div className="flex items-center justify-between mb-[10px]">
              <span>
                Anphatpc{" "}
                <a href="" className="ml-[5px] text-[#1877F2]">
                  (240)
                </a>
              </span>
              <i className="icon-star star4"></i>
            </div>
            <div className="flex items-center justify-between mb-[10px]">
              <span>
                Mygear{" "}
                <a href="" className="ml-[5px] text-[#1877F2]">
                  (240)
                </a>
              </span>
              <i className="icon-star star3"></i>
            </div>
            <div className="flex items-center justify-between mb-[10px]">
              <span>
                Hoangphatpc{" "}
                <a href="" className="ml-[5px] text-[#1877F2]">
                  (240)
                </a>
              </span>
              <i className="icon-star star2"></i>
            </div>
            <div className="flex items-center justify-between mb-[10px]">
              <span>
                Phucanhpc{" "}
                <a href="" className="ml-[5px] text-[#1877F2]">
                  (240)
                </a>
              </span>
              <i className="icon-star star1"></i>
            </div>
          </div>

          <div className="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
            <p className="text-center mt-[10px]">
              Đánh giá của bạn về sản phẩm
            </p>
            <a
              href="javascript:void(0)"
              className="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
            >
              Gửi đánh giá của bạn về sản phẩm
            </a>
          </div>
        </div>
        <div className="right w-[80%]">
          <div className="list-review mt-[15px]">
            <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
              <div className="w-[80px] mr-[20px]">
                <a href="hacom.vn" target="_blank" className="text-[#1877F2]">
                  Hacom.vn
                </a>
                <div className="time mt-[5px]">
                  <b className="mb-[2px] text-center block">Dino</b>
                  <p className="text-center">10:00pm 20/02/2025</p>
                </div>
              </div>
              <div className="w-[calc(100%-100px)]">
                <div className="flex items-center mb-[5px]">
                  <i className="icon-star star4"></i>
                  <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
                </div>
                <p className="content mb-[5px] text-base">
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry. Lorem Ipsum has been the industry's
                  standard dummy text ever since the 1500s, when an unknown
                  printer took a galley of type and scrambled it to make a type
                  specimen book. I
                </p>
                <a href="javascript:void(0)" className="flex items-start">
                  <span className="text-[16px] mr-[7px] underline">
                    Xem link nguồn
                  </span>
                  <i className="icon_2025 link-review"></i>
                </a>
              </div>
            </div>
            <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
              <div className="w-[80px] mr-[20px]">
                <a href="hacom.vn" target="_blank" className="text-[#1877F2]">
                  Hacom.vn
                </a>
                <div className="time mt-[5px]">
                  <b className="mb-[2px] text-center block">Dino</b>
                  <p className="text-center">10:00pm 20/02/2025</p>
                </div>
              </div>
              <div className="w-[calc(100%-100px)]">
                <div className="flex items-center mb-[5px]">
                  <i className="icon-star star4"></i>
                  <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
                </div>
                <p className="content mb-[5px] text-base">
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry. Lorem Ipsum has been the industry's
                  standard dummy text ever since the 1500s, when an unknown
                  printer took a galley of type and scrambled it to make a type
                  specimen book. I
                </p>
                <a href="javascript:void(0)" className="flex items-start">
                  <span className="text-[16px] mr-[7px] underline">
                    Xem link nguồn
                  </span>
                  <i className="icon_2025 link-review"></i>
                </a>
              </div>
            </div>
            <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
              <div className="w-[80px] mr-[20px]">
                <a href="hacom.vn" target="_blank" className="text-[#1877F2]">
                  Hacom.vn
                </a>
                <div className="time mt-[5px]">
                  <b className="mb-[2px] text-center block">Dino</b>
                  <p className="text-center">10:00pm 20/02/2025</p>
                </div>
              </div>
              <div className="w-[calc(100%-100px)]">
                <div className="flex items-center mb-[5px]">
                  <i className="icon-star star4"></i>
                  <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
                </div>
                <p className="content mb-[5px] text-base">
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry. Lorem Ipsum has been the industry's
                  standard dummy text ever since the 1500s, when an unknown
                  printer took a galley of type and scrambled it to make a type
                  specimen book. I
                </p>
                <a href="javascript:void(0)" className="flex items-start">
                  <span className="text-[16px] mr-[7px] underline">
                    Xem link nguồn
                  </span>
                  <i className="icon_2025 link-review"></i>
                </a>
              </div>
            </div>
          </div>
          {/* end list review */}
          <a
            href="javascript:void(0)"
            className="pt-[15px] text-[#FF7A00] btn-more-review"
          >
            Xem thêm <span>23</span> bình luận khác
          </a>
        </div>
      </div>
    </div>
  );
}
