export function SupplierListBox() {
  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à cung cấp trên BestPC - Tại Hà Nội
        </h3>
        <div className="flex items-center">
          <div className="flex items-center relative border border-[#b1b1b1] mr-[10px] w-[410px] h-[45px] px-[10px] rounded-[4px]">
            <i className="icon_2025 map-2"></i>
            <input
              type="text"
              placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
              className="outline-none ml-[5px] h-full w-full"
            />
          </div>
          <div className="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden">
            <select
              name=""
              id=""
              className=" 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 className="icon_2025 angle-right  ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
          </div>
        </div>
      </div>

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

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

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

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

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

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

          <div className="">
            <p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
              8GB - 9.000.000đ new White
            </p>
            <p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
              8GB - 9.000.000đ new White
            </p>
          </div>
          <div>
            <a
              href=""
              className="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=""
        className="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600"
      >
        Xem thêm
      </a>
    </div>
  );
}