export function ListCompare() {
  return (
    <div className="list-component mt-5">
      <div className="item-compare mb-12">
        <div className="flex items-center border-b-[1px] border-neutral-200 pb-3">
          <b className="left w-[200px] name-component">
            <a href="" className="block m-[auto_auto_auto_0]">
              <img
                src="/assets/images/logo-hacom.png"
                width="100%"
                height="100%"
                className="w-[150px] block h-[50px] object-contain"
                alt=""
              />
            </a>
          </b>
          <div className="right w-[calc(100%-200px)] grid grid-cols-8">
            <b className="item col-span-3">Sản phẩm</b>
            <b className="item">Giá gốc</b>
            <b className="item">Khuyến mãi</b>
            <b className="item">Giao hàng</b>
            <b className="item col-span-2">Thành tiền</b>
          </div>
        </div>

        <div className="list-product">
          <div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
            <b className="name-component block w-[200px]">CPU Cooler</b>
            <div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
              <div className="info col-span-3">
                <div className="flex items-center">
                  <a
                    href=""
                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
                  >
                    <img
                      src="/assets/images/lienkien-ram.png"
                      width="100%"
                      height="100%"
                      className="block w-full h-full object-contain"
                      alt=""
                    />
                  </a>
                  <a
                    href=""
                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
                  >
                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                  </a>
                </div>
              </div>
              <div className="old-price font-400">4.700.000 Vnđ</div>
              <div className="price-saleoff font-400">20%</div>
              <b className="ship underline">Liên hệ</b>
              <div className="col-span-2 flex items-center justify-between">
                <b className="total-amount">4.000.000đ</b>
                <a
                  href=""
                  className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
                >
                  Mua ngay
                </a>
              </div>
            </div>
          </div>
          <div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
            <b className="name-component block w-[200px]">CPU Cooler</b>
            <div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
              <div className="info col-span-3">
                <div className="flex items-center">
                  <a
                    href=""
                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
                  >
                    <img
                      src="/assets/images/lienkien-ram.png"
                      width="100%"
                      height="100%"
                      className="block w-full h-full object-contain"
                      alt=""
                    />
                  </a>
                  <a
                    href=""
                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
                  >
                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                  </a>
                </div>
              </div>
              <div className="old-price font-400">4.700.000 Vnđ</div>
              <div className="price-saleoff font-400">20%</div>
              <b className="ship underline text-[#33c600]">Liên hệ</b>
              <div className="col-span-2 flex items-center justify-between">
                <b className="total-amount">4.000.000đ</b>
                <a
                  href=""
                  className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
                >
                  Mua ngay
                </a>
              </div>
            </div>
          </div>
        </div>
        {/* <!-- end list --> */}

        <div className="text-right flex items-center font-bold justify-end mt-5">
          <div className="mr-[10px]">
            Tổng tiền (<span>2</span> sản phẩm) :
          </div>
          <div className="font-bold">6.000.000 Vnđ</div>
        </div>
      </div>

      <div className="item-compare mb-12">
        <div className="flex items-center border-b-[1px] border-neutral-200 pb-3">
          <b className="left w-[200px] name-component">
            <a href="" className="block m-[auto_auto_auto_0]">
              <img
                src="/assets/images/logo-hacom.png"
                width="100%"
                height="100%"
                className="w-[150px] block h-[50px] object-contain"
                alt=""
              />
            </a>
          </b>
          <div className="right w-[calc(100%-200px)] grid grid-cols-8">
            <b className="item col-span-3">Sản phẩm</b>
            <b className="item">Giá gốc</b>
            <b className="item">Khuyến mãi</b>
            <b className="item">Giao hàng</b>
            <b className="item col-span-2">Thành tiền</b>
          </div>
        </div>

        <div className="list-product">
          <div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
            <b className="name-component block w-[200px]">CPU Cooler</b>
            <div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
              <div className="info col-span-3">
                <div className="flex items-center">
                  <a
                    href=""
                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
                  >
                    <img
                      src="/assets/images/lienkien-ram.png"
                      width="100%"
                      height="100%"
                      className="block w-full h-full object-contain"
                      alt=""
                    />
                  </a>
                  <a
                    href=""
                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
                  >
                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                  </a>
                </div>
              </div>
              <div className="old-price font-400">4.700.000 Vnđ</div>
              <div className="price-saleoff font-400">20%</div>
              <b className="ship underline">Liên hệ</b>
              <div className="col-span-2 flex items-center justify-between">
                <b className="total-amount">4.000.000đ</b>
                <a
                  href=""
                  className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
                >
                  Mua ngay
                </a>
              </div>
            </div>
          </div>
          <div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
            <b className="name-component block w-[200px]">CPU Cooler</b>
            <div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
              <div className="info col-span-3">
                <div className="flex items-center">
                  <a
                    href=""
                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
                  >
                    <img
                      src="/assets/images/lienkien-ram.png"
                      width="100%"
                      height="100%"
                      className="block w-full h-full object-contain"
                      alt=""
                    />
                  </a>
                  <a
                    href=""
                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
                  >
                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                  </a>
                </div>
              </div>
              <div className="old-price font-400">4.700.000 Vnđ</div>
              <div className="price-saleoff font-400">20%</div>
              <b className="ship underline text-[#33c600]">Liên hệ</b>
              <div className="col-span-2 flex items-center justify-between">
                <b className="total-amount">4.000.000đ</b>
                <a
                  href=""
                  className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
                >
                  Mua ngay
                </a>
              </div>
            </div>
          </div>
        </div>
        {/* <!-- end list --> */}

        <div className="text-right flex items-center font-bold justify-end mt-5">
          <div className="mr-[10px]">
            Tổng tiền (<span>2</span> sản phẩm) :
          </div>
          <div className="font-bold">6.000.000 Vnđ</div>
        </div>
      </div>
    </div>
  );
}
