import GridWrapper from '@/components/GridWrapper'
import { COLORS } from '@/constants/colors'
import { t } from '@/locale'
import { BoxTick, BoxTime, ReceiptText, TruckTick } from 'iconsax-react'
import { type FC } from 'react'
import StatCard from './StatCard'
import { useGetOrderStats } from '@/pages/order/hooks/useOrderData'

const Stats: FC = () => {

    const { data } = useGetOrderStats();

    return (
        <GridWrapper
            desktop={4}
            mobile={2}
            gapDesktop={24}
            gapMobile={12}
            className='mt-5'
        >
            <StatCard
                count={data?.data.requestsCount}
                description={t('home.requestCount')}
                icon={<BoxTime
                    size={27}
                    color={COLORS.primary}
                />}
            />
            <StatCard
                count={data?.data.invoicesCount}
                description={t('home.factureCount')}
                icon={<ReceiptText
                    size={27}
                    color={COLORS.primary}
                />}
            />
            <StatCard
                count={data?.data.inProgressOrdersCount}
                description={t('home.orderCount')}
                icon={<BoxTick
                    size={27}
                    color={COLORS.primary}
                />}
            />
            <StatCard
                count={data?.data.completedOrdersCount}
                description={t('home.orderDoneCount')}
                icon={<TruckTick
                    size={27}
                    color={COLORS.primary}
                />}
            />
        </GridWrapper>
    )
}

export default Stats