import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import StatusWithText from '../../components/StatusWithText'
import { useNavigate, useParams } from 'react-router-dom'
import { ArrowLeft2 } from 'iconsax-react'
import { useGetAnnoncementDetail } from './hooks/useAnnoncementData'
import PageLoading from '../../components/PageLoading'

const AnnouncementDetail: FC = () => {

    const { id } = useParams()
    const { t } = useTranslation('global')
    const navigate = useNavigate()
    const getDetail = useGetAnnoncementDetail(id ? id : '')

    return (
        <div className='mt-4'>
            <div className='flex justify-between'>
                <div>
                    {t('announcement.text_announcement')}
                </div>
                <div onClick={() => navigate(-1)} className='text-xs cursor-pointer flex gap-0.5 items-center font-extralight'>
                    {t('back')}
                    <ArrowLeft2 size={12} color='black' />
                </div>
            </div>

            {
                getDetail.isPending ?
                    <PageLoading />
                    :
                    <div className='flex-1 mt-4 bg-white py-6 px-4 rounded-2xl'>
                        <div className='flex justify-between items-start'>
                            <div className='text-sm max-w-[70%] leading-67'>
                                {getDetail.data?.data?.announcement?.title}
                            </div>
                            <div className='flex gap-1'>
                                {
                                    getDetail.data?.data?.announcement.isImportant &&
                                    <StatusWithText
                                        variant='error'
                                        text={t('announcement.important')}
                                    />
                                }

                                <StatusWithText
                                    variant='success'
                                    text={t('announcement.new')}
                                />
                            </div>
                        </div>

                        <div dangerouslySetInnerHTML={{ __html: getDetail.data?.data?.announcement?.content }} className='mt-5 leading-7 text-xs font-light'>
                        </div>
                    </div>
            }
        </div>
    )
}

export default AnnouncementDetail