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'
import { Helmet } from 'react-helmet-async'

const AnnouncementDetail: FC = () => {

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

    return (
        <div className='mt-4'>
            <Helmet>
                <title>
                    داناک | اطلاعیه
                </title>
            </Helmet>
            <div className='flex justify-between'>
                <div>
                    {t('announcement.text_announcement')}
                </div>
                <div onClick={() => navigate(-1)} className='text-xs flex gap-0.5 items-center font-extralight'>
                    {t('back')}
                    <ArrowLeft2 size={12} color='black' />
                </div>
            </div>

            {
                getAnnoncementDetail.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'>
                                {getAnnoncementDetail.data?.data?.announcement?.title}
                            </div>
                            {
                                getAnnoncementDetail.data?.data?.announcement.isImportant &&
                                <StatusWithText
                                    variant='error'
                                    text={t('announcement.important')}
                                />
                            }
                        </div>

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

                        </div>
                    </div>
            }
        </div>
    )
}

export default AnnouncementDetail