import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useGetRestaurantSmsCount } from '../hooks/useIconData'
import PageLoading from '../../../components/PageLoading'
import Td from '../../../components/Td'
import { RestaurantSmsCountItem } from '../types/Types'

const SmsCountList: FC = () => {
    const { t } = useTranslation('global')
    const { data: smsCount, isLoading } = useGetRestaurantSmsCount()

    const smsCountList = (smsCount as { data?: RestaurantSmsCountItem[] })?.data || []

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('restaurant.list_sms_count')}
                </div>
            </div>

            {
                isLoading ?
                    <PageLoading />
                    :
                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                        <table className='w-full text-sm '>
                            <thead className='thead'>
                                <tr>
                                    <Td text={t('restaurant.name')} />
                                    <Td text={t('restaurant.sms_count')} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    smsCountList.map((item: RestaurantSmsCountItem) => {
                                        return (
                                            <tr key={item.restaurantId} className='tr'>
                                                <Td text={item.restaurantName} />
                                                <Td text={item.smsCount.toString()} />
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
            }
        </div>
    )
}

export default SmsCountList