import GridWrapper from '@/components/GridWrapper'
import { Paths } from '@/config/Paths'
import { COLORS } from '@/constants/colors'
import { t } from '@/locale'
import { ProformaInvoiceStatusEnum } from '@/pages/invoice/enum/InvoiceEnum'
import { TabMyOrdersEnum } from '@/pages/order/enum/OrderEnum'
import { useGetOrderStats } from '@/pages/order/hooks/useOrderData'
import { BoxTick, BoxTime, ReceiptText, TruckTick } from 'iconsax-react'
import { type FC } from 'react'
import StatCard from './StatCard'

const Stats: FC = () => {

    const { data } = useGetOrderStats();

    return (
        <GridWrapper
            desktop={4}
            mobile={2}
            gapDesktop={24}
            gapMobile={12}
            className='mt-4 md:mt-5'
        >
            <StatCard
                count={data?.data.requestsCount}
                description={t('home.requestCount')}
                to={Paths.myRequests}
                icon={<BoxTime
                    size={27}
                    color={COLORS.primary}
                />}
            />
            <StatCard
                count={data?.data.invoicesCount}
                description={t('home.factureCount')}
                to={`${Paths.proformaInvoice}?tab=${ProformaInvoiceStatusEnum.PENDING}`}
                icon={<ReceiptText
                    size={27}
                    color={COLORS.primary}
                />}
            />
            <StatCard
                count={data?.data.inProgressOrdersCount}
                description={t('home.orderCount')}
                to={`${Paths.order.myOrders}?tab=${TabMyOrdersEnum.IN_PROGRESS}`}
                icon={<BoxTick
                    size={27}
                    color={COLORS.primary}
                />}
            />
            <StatCard
                count={data?.data.completedOrdersCount}
                description={t('home.orderDoneCount')}
                to={`${Paths.order.myOrders}?tab=${TabMyOrdersEnum.DELIVERED}`}
                icon={<TruckTick
                    size={27}
                    color={COLORS.primary}
                />}
            />
        </GridWrapper>
    )
}

export default Stats