import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import StatusWithText from '../../components/StatusWithText'
import { useNavigate } from 'react-router-dom'
import { ArrowLeft2 } from 'iconsax-react'

const AnnouncementDetail: FC = () => {

    const { t } = useTranslation('global')
    const navigate = useNavigate()

    return (
        <div className='mt-4'>
            <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>

            <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'>
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                    </div>
                    <StatusWithText
                        variant='success'
                        text={t('announcement.new')}
                    />
                </div>

                <div className='mt-5 leading-7 text-xs font-light'>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </div>
            </div>
        </div>
    )
}

export default AnnouncementDetail