import { Tooltip } from "antd";
import React, { Fragment } from "react";
import { FaCoins } from "react-icons/fa";
import {
  FaMoneyBillTransfer,
  FaMoneyBillTrendUp,
  FaMoneyBills,
} from "react-icons/fa6";
import { abbreviateNumber } from "../../utils/nFormetter";
import useCurrency from "../../utils/useCurrency";

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

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

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

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

export default DashboardCard;
