import { Tooltip } from "antd";
import React, { Fragment } from "react";
import { FaCoins } from "react-icons/fa";
import { FaMoneyBillTransfer, FaMoneyBillTrendUp, FaMoneyBills } from "react-icons/fa6";
import { LiaFileInvoiceSolid } from "react-icons/lia";
import { abbreviateNumber } from "../../utils/nFormetter";
import useCurrency from "../../utils/useCurrency";
import { BiCartAdd } from "react-icons/bi";
const DashboardCard = ({ information, count }) => {
    const currency = useCurrency();

  return (
    <Fragment>
      <section className="grid sm:grid-cols-2 xl:grid-cols-4 gap-6 mt-5 mb-5">
        {/* Total Purchases Card */}
        <div className="relative p-6 rounded-2xl text-white overflow-hidden bg-gradient-to-br from-blue-500 to-blue-700 shadow-lg" >
          <div className="absolute top-4 right-4 bg-white bg-opacity-20 rounded-lg p-3">
            <BiCartAdd size={24} className="text-white" />
          </div>
          <div className="relative z-10">
            <h3 className="text-sm font-semibold uppercase tracking-wide mb-3 opacity-90">
              Total Purchases
            </h3>
            <Tooltip
              title={
                <span className="text-lg">
                  <span
                    dangerouslySetInnerHTML={{
                      __html: currency?.currencySymbol,
                    }}
                  />
                  {information?.totalAmount?.toFixed(3)}
                </span>
              }
            >
              <div className="text-3xl font-bold mb-2">
                <span
                  dangerouslySetInnerHTML={{
                    __html: currency?.currencySymbol,
                  }}
                />
                {information?.totalAmount
                  ? abbreviateNumber(Number(information?.totalAmount))
                  : 0}
              </div>
            </Tooltip>
          </div>
        </div>

        {/* Total Purchase Paid Card */}
        <div className="relative p-6 rounded-2xl text-white overflow-hidden bg-gradient-to-br from-purple-500 to-pink-600 shadow-lg" >
          <div className="absolute top-4 right-4 bg-white bg-opacity-20 rounded-lg p-3">
            <FaMoneyBills size={24} className="text-white" />
          </div>
          <div className="relative z-10">
            <h3 className="text-sm font-semibold uppercase tracking-wide mb-3 opacity-90">
              Total Purchase Paid
            </h3>
            <Tooltip
              title={
                <span className="text-lg">
                  <span
                    dangerouslySetInnerHTML={{
                      __html: currency?.currencySymbol,
                    }}
                  />
                  {information?.paidAmount?.toFixed(3)}
                </span>
              }
            >
              <div className="text-3xl font-bold">
                <span
                  dangerouslySetInnerHTML={{
                    __html: currency?.currencySymbol,
                  }}
                />
                {information?.paidAmount
                  ? abbreviateNumber(Number(information.paidAmount))
                  : 0}
              </div>
            </Tooltip>
          </div>
        </div>

        {/* Total Purchase Due Card */}
        <div className="relative p-6 rounded-2xl text-white overflow-hidden bg-gradient-to-br from-green-500 to-teal-600 shadow-lg" >
          <div className="absolute top-4 right-4 bg-white bg-opacity-20 rounded-lg p-3">
            <FaMoneyBillTransfer size={24} className="text-white" />
          </div>
          <div className="relative z-10">
            <h3 className="text-sm font-semibold uppercase tracking-wide mb-3 opacity-90">
              Total Purchase Due
            </h3>
            <Tooltip
              title={
                <span className="text-lg">
                  <span
                    dangerouslySetInnerHTML={{
                      __html: currency?.currencySymbol,
                    }}
                  />
                  {information?.dueAmount?.toFixed(3)}
                </span>
              }
            >
              <div className="text-3xl font-bold">
                <span
                  dangerouslySetInnerHTML={{
                    __html: currency?.currencySymbol,
                  }}
                />
                {information?.dueAmount
                  ? abbreviateNumber(information?.dueAmount)
                  : 0}
              </div>
            </Tooltip>
          </div>
        </div>

        {/* Total Purchase Return Card */}
        <div className="relative p-6 rounded-2xl text-white overflow-hidden bg-gradient-to-br from-orange-500 to-orange-700 shadow-lg" >
          <div className="absolute top-4 right-4 bg-white bg-opacity-20 rounded-lg p-3">
            <FaMoneyBillTrendUp size={24} className="text-white" />
          </div>
          <div className="relative z-10">
            <h3 className="text-sm font-semibold uppercase tracking-wide mb-3 opacity-90">
              Total Purchase Return
            </h3>
            <Tooltip
              title={
                <span className="text-lg">
                  <span
                    dangerouslySetInnerHTML={{
                      __html: currency?.currencySymbol,
                    }}
                  />
                  {information?.totalReturnAmount?.toFixed(3)}
                </span>
              }
            >
              <div className="text-3xl font-bold">
                <span
                  dangerouslySetInnerHTML={{
                    __html: currency?.currencySymbol,
                  }}
                />
                {information?.totalReturnAmount
                  ? abbreviateNumber(information?.totalReturnAmount)
                  : 0}
              </div>
            </Tooltip>
          </div>
        </div>
      </section>
    </Fragment>
  );
};

export default DashboardCard;
