import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Element3, Messages3, NotificationStatus, People, Receipt2 } from 'iconsax-react'
import ItemDashboard from './components/ItemDashboard'
import { useGetDashboard } from './hooks/useHomeData'
import { Pages } from '../../config/Pages'


const Home: FC = () => {

    const { t } = useTranslation('global')
    const getDashboard = useGetDashboard()

    return (
        <div className='w-full flex gap-6'>
            <div className='flex-1'>

                <div className='mt-8 flex-wrap text-sm flex gap-6 items-center'>
                    <ItemDashboard
                        title={t('home.services')}
                        icon={<Element3 size={20} color='black' />}
                        color='#00D16C'
                        count={getDashboard.data?.data?.danakServicesCount}
                        description={t('home.service')}
                        to={Pages.services.list}
                    />

                    <ItemDashboard
                        title={t('home.customers')}
                        icon={<People size={20} color='black' />}
                        color='#00D16C'
                        count={getDashboard.data?.data?.customersCount}
                        description={t('home.customer')}
                        to={Pages.customers.list}
                    />

                    <ItemDashboard
                        title={t('home.ticket')}
                        icon={<Messages3 size={20} color='black' />}
                        color='#FF7B00'
                        count={getDashboard.data?.data?.unreadTickets}
                        description={t('home.unread_messages')}
                        to={Pages.ticket.list}
                    />

                    <ItemDashboard
                        title={t('home.ads')}
                        icon={<NotificationStatus size={20} color='black' />}
                        color='#FF0000'
                        count={getDashboard.data?.data?.adsCount}
                        description={t('home.active_ads')}
                        to={Pages.ads.list}
                    />

                    <ItemDashboard
                        title={t('home.invoices')}
                        icon={<Receipt2 size={20} color='black' />}
                        color='#0047FF'
                        count={getDashboard.data?.data?.invoicesCount}
                        description={t('home.new_invoice')}
                        to={Pages.receipts.index}
                    />

                </div>


            </div>
        </div>
    )
}

export default Home