import React from "react";
import country1 from "../../assets/images/country-1.png";
import country2 from "../../assets/images/country-2.png";
import country3 from "../../assets/images/country-3.png";
import SellMonthStatics from "../Charts/SellMonthStatics";
import SellHistoryWidget from "../Home/SellHistoryWidget";
import CurrentBalanceWidget from "../MyWallet/CurrentBalanceWidget";
import Layout from "../Partials/Layout";
//import SellAnaliseStatics from "./SellAnaliseStatics";
import SellProductHistoryTable from "./SellProductHistoryTable";
import SubScriptionTop from "./SubScriptionTop";

import PricingListTable from "./PricingListTable";
export default function Subscriptions() {
  return (
    <>
      <Layout>
        <SubScriptionTop />
        <div className="sell-page-wrapper w-full mb-10">
          <div className="main-wrapper w-full">
            <div className="current_balance-bit-sell-widget w-full lg:h-[436px] mb-11">
              <div className="w-full h-full lg:flex lg:space-x-7">
                {/* style={{ width: "calc(50% - 15px)" }} */}


                <div className="lg:w-1/3 h-full mb-10 lg:mb-0">
                  <div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
                    {/* heading */}
                    <div className="w-full h-16 bg-gold flex pl-7 items-center">
                      <h1 className="text-xl font-medium tracking-wide text-white">
                        Bits this Month
                      </h1>
                    </div>
                    <div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white  ">
                      <div className="w-full px-5 pt-5">
                        <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                          769.44 ETH
                        </p>
                        <p className="text-thin-light-gray text-18 flex items-center">
                          <span>($949374.94)</span>
                          <span className="ml-2 text-sm text-light-red">
                            -224.75 (11.5%)
                          </span>
                        </p>
                      </div>
                      <div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
                        <PricingListTable setRGBColor="rgba(242, 153, 74)" />
                      </div>
                    </div>
                  </div>
                </div>

                <div className="lg:w-1/3 h-full mb-10 lg:mb-0">
                  <div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
                    {/* heading */}
                    <div className="w-full h-16 bg-gold flex pl-7 items-center">
                      <h1 className="text-xl font-medium tracking-wide text-white">
                        Bits this Month
                      </h1>
                    </div>
                    <div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white  ">
                      <div className="w-full px-5 pt-5">
                        <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                          769.44 ETH
                        </p>
                        <p className="text-thin-light-gray text-18 flex items-center">
                          <span>($949374.94)</span>
                          <span className="ml-2 text-sm text-light-red">
                            -224.75 (11.5%)
                          </span>
                        </p>
                      </div>
                      <div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
                        <PricingListTable setRGBColor="rgba(242, 153, 74)" />
                      </div>
                    </div>
                  </div>
                </div>

                <div className="lg:w-1/3 h-full mb-10 lg:mb-0">
                  <div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
                    {/* heading */}
                    <div className="w-full h-16 bg-pink flex pl-7 items-center">
                      <h1 className="text-xl font-medium tracking-wide text-white">
                        Sell Earing this Month
                      </h1>
                    </div>
                    <div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white  ">
                      <div className="w-full px-5 pt-5">
                        <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                          769.44 ETH
                        </p>
                        <p className="text-thin-light-gray text-18 flex items-center">
                          <span>($949374.94)</span>
                          <span className="ml-2 text-sm text-light-green">
                            224.75 (11.5%)
                          </span>
                        </p>
                      </div>
                      <div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
                        <PricingListTable setRGBColor="rgba(245, 57, 248, 1)" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          
          </div>
        </div>
      </Layout>
    </>
  );
}