'use client';

import { ef } from '@/lib/helpers/utfNumbers';
import { ArrowLeft, Trash } from 'iconsax-react';
import { useRouter } from 'next/navigation';
import React from 'react'
import { useTranslation } from 'react-i18next';

type Props = object

export default function NotificationsIndex({ }: Props) {
    const { t } = useTranslation('notifications')
    const router = useRouter();

    return (
        <div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
            <div className='grid grid-cols-3 items-center py-4 '>
                <span></span>
                <h1 className='text-sm2 place-self-center font-medium'>{t("Heading")}</h1>
                <ArrowLeft
                    className='cursor-pointer place-self-end'
                    size='24'
                    color='currentColor'
                    onClick={() => { router.back() }}
                />
            </div>

            <ul className='flex flex-col gap-4 pb-20'>
                <li className='bg-container py-5 px-4 rounded-container shadow-lg'>
                    <h5 className='font-medium text-sm'>عنوان پیام</h5>
                    <p className='text-xs mt-2 leading-5'>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>

                    <div className='flex items-center justify-between mt-5 '>
                        <div className="flex items-center justify-start gap-2">
                            <span className='px-4 pt-1 pb-0.5 text-xs bg-primary text-white rounded-md'>
                                {t('Tags.New')}
                            </span>
                            <span className='text-disabled2 text-xs pt-0.5'>
                                {ef('28 مرداد 1401')}
                            </span>
                            <span className='size-1.5 bg-disabled rounded-full'></span>
                            <span className='text-disabled2 text-xs pt-0.5'>
                                {ef('21:32')}
                            </span>
                        </div>
                        <Trash size={24} className='stroke-primary' />
                    </div>
                </li>

            </ul>
        </div>
    )
}