bestpc/src/pages/product/ProductPage.tsx

import { useState, useEffect, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";

import { FreeMode, Navigation, Thumbs } from "swiper/modules";

export function ProductDetail() {
  // const [activeImage, setActiveImage] = useState(
  //   "/src/assets/images/big-product-detail.png"
  // );
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  const prevButtonRef = useRef(null);
  const nextButtonRef = useRef(null);

  return (
    <div className="box-product-detail bg-[#F4F4F4]">
      <div className="container">
        <div className="breadcrumb p-[12px_0]">
          <ol
            itemscope
            itemtype="http://schema.org/BreadcrumbList"
            className="ul flex flex-wrap items-center"
          >
            <li
              itemprop="itemListElement"
              itemscope
              itemtype="http://schema.org/ListItem"
              className="flex items-center pr-[12px]"
            >
              <a
                href="/template/homepage/homepage.html"
                itemprop="item"
                className="nopad-l flex items-center text-[#637381]"
              >
                <span itemprop="name">
                  <span style="font-size: 0; display: none;">Trang chủ</span>
                  <i className="icon_2025 home mr-[5px] mb-[5px]" />
                </span>
              </a>{" "}
              <i className="icon_2025 angle-right ml-[12px]" />
              <meta itemprop="position" content="1" />
            </li>
            <li
              itemprop="itemListElement"
              itemscope
              itemtype="http://schema.org/ListItem"
              className="flex items-center pr-[12px]"
            >
              <a
                href="/man-hinh.html"
                itemprop="item"
                className="nopad-l flex items-center"
              >
                <span itemprop="name">Màn hình máy tính</span>
                <i className="icon_2025 angle-right text-[#637381] ml-[12px]" />
              </a>
              <meta itemprop="position" content="2" />
            </li>
            <li
              itemprop="itemListElement"
              itemscope
              itemtype="http://schema.org/ListItem"
              className="flex items-center pr-[12px]"
            >
              <a
                href="/aivision.html"
                itemprop="item"
                className="nopad-l flex items-center"
              >
                <span itemprop="name">AIVISION</span>
              </a>
              <meta itemprop="position" content="3" />
            </li>
          </ol>
        </div>

        <div className="p-[15px] grid grid-cols-2 gap-[15px] rounded-[8px] bg-white">
          <div className="left">
            <div className="relative">
              <Swiper
                spaceBetween={10}
                navigation={true}
                thumbs={{ swiper: thumbsSwiper }}
                modules={[FreeMode, Navigation, Thumbs]}
                className="swiper border border-[#B1B1B1 rounded-[12px]"
                id="js-slider-big"
              >
                <SwiperSlide>
                  <img src="/src/assets/images/big-product-detail.png" alt="" />
                </SwiperSlide>

                <SwiperSlide>
                  <img src="/src/assets/images/big-product-detail.jpg" alt="" />
                </SwiperSlide>

                <SwiperSlide>
                  <img
                    src="/src/assets/images/big-product-detail-2.jpg"
                    alt=""
                  />
                </SwiperSlide>

                <SwiperSlide>
                  <img
                    src="/src/assets/images/big-product-detail-3.jpg"
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/src/assets/images/big-product-detail-4.jpg"
                    alt=""
                  />
                </SwiperSlide>
              </Swiper>
            </div>
            <div className="relative mt-[12px]">
              <Swiper
                onSwiper={setThumbsSwiper}
                spaceBetween={15}
                slidesPerView={5}
                navigation={{
                  prevEl: prevButtonRef.current, // Link to the 'prev' button
                  nextEl: nextButtonRef.current, // Link to the 'next' button
                }}
                freeMode={true}
                watchSlidesProgress={true}
                modules={[FreeMode, Navigation, Thumbs]}
                className="swiper"
                id="js-slider-small"
              >
                <SwiperSlide>
                  <img
                    src="/src/assets/images/small-product-detail.png"
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/src/assets/images/small-product-detail.png"
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/src/assets/images/small-product-detail.png"
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/src/assets/images/small-product-detail.png"
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/src/assets/images/small-product-detail.png"
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/src/assets/images/small-product-detail.png"
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/src/assets/images/small-product-detail.png"
                    alt=""
                  />
                </SwiperSlide>
                <SwiperSlide>
                  <img
                    src="/src/assets/images/small-product-detail.png"
                    alt=""
                  />
                </SwiperSlide>
              </Swiper>
              <div className="btn-small swiper-navigation">
                <button
                  ref={prevButtonRef}
                  className="swiper-button-prev"
                  style={{
                    position: "absolute",
                    left: "-15px",
                    zIndex: 10,
                  }}
                ></button>
                <button
                  ref={nextButtonRef}
                  className="swiper-button-next"
                  style={{
                    position: "absolute",
                    right: "-20px",
                    zIndex: 10,
                  }}
                ></button>
              </div>
            </div>
          </div>

          <div className="right">
            <h1 className="text-[24px] text-black mb-[5px]">
              Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6"
              FHD) - Hàng Chính Hãng
            </h1>
            <div className="flex items-center text-base">
              <div className="info-review flex items-center mr-[15px]">
                <i className="icon-star star-small" />
                <span className="ml-[5px] mt-[2px]">5/5</span>
              </div>
              <div className="info-view flex items-center mr-[15px]">
                <i className="icon_2025 view" />
                <span className="text-[#1877F2] ml-[5px]">120</span>
              </div>
              <div className="info-date flex items-center mr-[15px]">
                <i className="icon_2025 time-big" />
                <span className="text-[#1877F2] ml-[5px]">12/03/2025</span>
              </div>
              <a href="" className="info-share flex items-center">
                <i className="icon_2025 share" />
                <span className="ml-[5px] mt-[2px]">Chia sẻ</span>
              </a>
            </div>
            <div className="flex items-center mt-[5px] text-base">
              <div className="source-review flex items-centermr-[10px]">
                <span>Reviews trên:</span>
                <a href="" className="ml-[5px] text-[#1877F2]">
                  Internet
                </a>
                <p className="ml-[5px]">1233 đánh giá</p>
              </div>
              <div className="pl-[10px] ml-[10px] flex items-center border-l-[1.5px] border-[#000]">
                <a href="" className="mr-[5px] text-[#462F91]">
                  BestPC
                </a>
                <p>12003 đánh giá</p>
              </div>
            </div>
            <div className="box-price flex items-center my-[10px]">
              <span className="mr-[10px]">Giá:</span>
              <b className="text-[#D80A00] text-[28px]">
                9.000.000đ - 12.000.000đ
              </b>
            </div>

            <div className="total-shop flex items-center">
              <div className="box-shop">
                <i className="icon_2025 shop" />
              </div>
              <p className="ml-[7px]">Có 12 cửa hàng bán</p>
            </div>

            <div className="box-summary mt-[15px]">
              <ul>
                <li>
                  CPU: Intel Core i7-8750H ( 2.2 GHz - 4.1 GHz / 9MB / 6 nhân,
                  12 luồng )
                </li>
                <li>Màn hình: 15.6" ( 1920 x 1080 ) , không cảm ứng</li>
                <li>RAM: 1 x 8GB DDR4 2666MHz</li>
                <li>
                  Đồ họa: Intel UHD Graphics 630 / NVIDIA GeForce GTX 1050Ti 4GB
                  GDDR5
                </li>
                <li>Lưu trữ: 128GB SSD M.2 NVMe / 1TB HDD 5400RPM</li>
                <li>Hệ điều hành: Windows 10 Home SL 64-bit</li>
                <li>Pin: 4 cell 64 Wh Pin liền</li>
                <li>khối lượng: 2.5 kg</li>
                <li>Cổng giao tiếp: 1x USB 2.0,</li>
              </ul>
            </div>

            <a
              href=""
              className="group mt-4 flex items-center justify-center w-ful py-[10px] border border-[#D3D3D3] rounded-[4px] text-center hover:bg-[var(--color-global)] hover:text-white"
            >
              <img
                src="/src/assets/images/icon-file-save.png"
                className="w-[18px] h-[24px] block group-hover:brightness-[0] group-hover:invert-[1]"
                alt="save"
              />
              <b className="ml-[10px] text-base">Lưu sản phẩm lại xem sau</b>
            </a>
          </div>
        </div>
        {/* end thông tin sản phẩm */}

        <div class="p-[15px] bg-white mt-5 rounded-[8px]">
          <div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
            <h3 class="text-xl ">Nhà cung cấp trên BestPC - Tại Hà Nội</h3>
            <div class="flex items-center">
              <div class="flex items-center relative border border-[#b1b1b1] mr-[10px] w-[410px] h-[45px] px-[10px] rounded-[4px]">
                <i class="icon_2025 map-2"></i>
                <input
                  type="text"
                  placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
                  class="outline-none ml-[5px] h-full w-full"
                />
              </div>
              <div class="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden">
                <select
                  name=""
                  id=""
                  class=" appearance-none w-full relative pl-[10px] bg-transparent h-full z-[2]"
                >
                  <option value="">Sắp xếp</option>
                  <option value="">Mới</option>
                </select>
                <i class="icon_2025 angle-right  ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
              </div>
            </div>
          </div>

          <div class="mt-[10px] py-[15px] grid grid-cols-5 text-xl border-b-[1px] border-[#D9D9D9]">
            <div>
              <b>Nhà cung cấp</b>
            </div>
            <div>
              <b>Chính sách vận chuyển</b>
            </div>
            <div>
              <b>Giá</b>
            </div>
            <div>
              <b>Sản phẩm</b>
            </div>
          </div>

          <div class="list ">
            <div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
              <div class="flex items-start supplier">
                <div class="logo mr-[10px]">
                  <div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
                    <img
                      src="/src/assets/images/logo-hacom.png"
                      class="block w-full h-full object-contain m-[0_auto]"
                      width="100%"
                      height="100%"
                      alt="hacom"
                    />
                  </div>
                  <div class="flex items-center justify-center mt-2">
                    <i class="icon_2025 map-4"></i>
                    <span class="ml-[5px]">3km</span>
                  </div>
                </div>
                <div>
                  <div class="flex items-center">
                    <i class="icon-star star4"></i>
                    <span class="ml-[5px] mt-[3px]">4.7</span>
                  </div>
                  <a href="" class="text-[#1877F2] font-bold">
                    Hanoicomputer
                  </a>
                  <a href="" class="text-[#E85933] underline block">
                    Xem 7 cửa hàng
                  </a>
                </div>
              </div>

              <div class="ship">
                <p>Miễn phí giao hàng</p>
                <p>
                  Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể
                  cả ngày thứ 7, CN
                </p>
              </div>

              <div class="price">
                <div class="flex items-center text-base">
                  <span>Giá:</span>
                  <b class="ml-[5px] text-[#D80A00]">
                    9.000.000đ - 20.000.000đ
                  </b>
                </div>
                <b class="mt-2">Đã có VAT</b>
              </div>

              <div class="">
                <p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
                  8GB - 9.000.000đ new White
                </p>
                <p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
                  8GB - 9.000.000đ new White
                </p>
              </div>
              <div>
                <a
                  href=""
                  class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
                >
                  Liên hệ ngay
                </a>
              </div>
            </div>

            <div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
              <div class="flex items-start supplier">
                <div class="logo mr-[10px]">
                  <div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
                    <img
                      src="/src/assets/images/logo-hacom.png"
                      class="block w-full h-full object-contain m-[0_auto]"
                      width="100%"
                      height="100%"
                      alt="hacom"
                    />
                  </div>
                  <div class="flex items-center justify-center mt-2">
                    <i class="icon_2025 map-4"></i>
                    <span class="ml-[5px]">3km</span>
                  </div>
                </div>
                <div>
                  <div class="flex items-center">
                    <i class="icon-star star4"></i>
                    <span class="ml-[5px] mt-[3px]">4.7</span>
                  </div>
                  <a href="" class="text-[#1877F2] font-bold">
                    Hanoicomputer
                  </a>
                  <a href="" class="text-[#E85933] underline block">
                    Xem 7 cửa hàng
                  </a>
                </div>
              </div>

              <div class="ship">
                <p>Miễn phí giao hàng</p>
                <p>
                  Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể
                  cả ngày thứ 7, CN
                </p>
              </div>

              <div class="price">
                <div class="flex items-center text-base">
                  <span>Giá:</span>
                  <b class="ml-[5px] text-[#D80A00]">
                    9.000.000đ - 20.000.000đ
                  </b>
                </div>
                <b class="mt-2">Đã có VAT</b>
              </div>

              <div class="">
                <p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
                  8GB - 9.000.000đ new White
                </p>
                <p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
                  8GB - 9.000.000đ new White
                </p>
              </div>
              <div>
                <a
                  href=""
                  class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
                >
                  Liên hệ ngay
                </a>
              </div>
            </div>

            <div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
              <div class="flex items-start supplier">
                <div class="logo mr-[10px]">
                  <div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
                    <img
                      src="/src/assets/images/logo-hacom.png"
                      class="block w-full h-full object-contain m-[0_auto]"
                      width="100%"
                      height="100%"
                      alt="hacom"
                    />
                  </div>
                  <div class="flex items-center justify-center mt-2">
                    <i class="icon_2025 map-4"></i>
                    <span class="ml-[5px]">3km</span>
                  </div>
                </div>
                <div>
                  <div class="flex items-center">
                    <i class="icon-star star4"></i>
                    <span class="ml-[5px] mt-[3px]">4.7</span>
                  </div>
                  <a href="" class="text-[#1877F2] font-bold">
                    Hanoicomputer
                  </a>
                  <a href="" class="text-[#E85933] underline block">
                    Xem 7 cửa hàng
                  </a>
                </div>
              </div>

              <div class="ship">
                <p>Miễn phí giao hàng</p>
                <p>
                  Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể
                  cả ngày thứ 7, CN
                </p>
              </div>

              <div class="price">
                <div class="flex items-center text-base">
                  <span>Giá:</span>
                  <b class="ml-[5px] text-[#D80A00]">
                    9.000.000đ - 20.000.000đ
                  </b>
                </div>
                <b class="mt-2">Đã có VAT</b>
              </div>

              <div class="">
                <p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
                  8GB - 9.000.000đ new White
                </p>
                <p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
                  8GB - 9.000.000đ new White
                </p>
              </div>
              <div>
                <a
                  href=""
                  class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
                >
                  Liên hệ ngay
                </a>
              </div>
            </div>
          </div>
          {/*  end list */}

          <a
            href=""
            class="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600"
          >
            Xem thêm
          </a>
        </div>
        {/* end nhà cung cấp */}
      </div>
    </div>
  );
}