export function FormReview({ show, onClose }) {
  return (
    <>
      <div
        id="backgroundPopup"
        className={`${show ? "active" : ""}`}
        onClick={onClose}
      ></div>
      <div
        className={`box-form-review fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px] ${
          show ? "" : "hidden"
        }`}
        id="js-box-review"
      >
        <div className="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
          <b className="text-center text-xl block">Đánh giá sản phẩm</b>
          <a
            href="javascript:void(0)"
            onClick={onClose}
            id="js-close-review"
            className="absolute right-0 top-0 text-[#808080] text-[22px] "
          >
            <i class="icon_2025 close"></i>
          </a>
        </div>
        <div className="info-form-review w-[500px] mx-[auto]">
          <a
            href=""
            className="block m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]"
          >
            <img
              src="/assets/images/small-product-detail.png"
              width="100%"
              height="100%"
              className="block w-[100px] h-[100px] m-[0_auto]"
              alt=""
            />
          </a>
          <a href="" className="text-center block mb-[10px]">
            Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6" FHD)
            - Hàng Chính Hãng
          </a>

          <div className="flex justify-center">
            <div className="rating-selection">
              <input
                type="radio"
                className="rating-input"
                id="star5"
                name="rating"
                value="5"
              />
              <label for="star5" className="rating-star"></label>

              <input
                type="radio"
                className="rating-input"
                id="star4"
                name="rating"
                value="4"
              />
              <label for="star4" className="rating-star"></label>

              <input
                type="radio"
                className="rating-input"
                id="star3"
                name="rating"
                value="3"
              />
              <label for="star3" className="rating-star"></label>

              <input
                type="radio"
                className="rating-input"
                id="star2"
                name="rating"
                value="2"
              />
              <label for="star2" className="rating-star"></label>

              <input
                type="radio"
                className="rating-input"
                id="star1"
                name="rating"
                value="1"
              />
              <label for="star1" className="rating-star"></label>
            </div>
          </div>
          <div className="clearfix"></div>
        </div>
        <div className="form-input mt-[20px]">
          <input
            type="text"
            name="title"
            placeholder="Mời bạn nhập tiêu đề..."
          />
          <div className="note-error"></div>
        </div>
        <div className="form-input mt-[10px]">
          <textarea
            name="content"
            placeholder="Mời bạn chia sẻ cảm nhận..."
            id=""
          ></textarea>
          <div className="note-error"></div>
        </div>
        <input id="js-file-upload-id" type="hidden" value="" />
        <div id="js-container-selector" className="mt-[10px] flex items-center">
          <a
            href="javascript:void(0)"
            className="flex items-center"
            id="js-select-file"
          >
            <i className="icon_2025 upload_image"></i>
            <span className="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
            <span className="px-[5px]">(tối đa 3 ảnh)</span>
          </a>
        </div>

        <button
          type="submit"
          className="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]"
        >
          Gửi đánh giá
        </button>
      </div>
    </>
  );
}
