import { Divider } from 'antd';
import { useTranslation } from 'react-i18next'
import { NotificationArray } from './NotificationArray';
import { notifications } from '../../../types/Notifications';
import Card from './Card';
import TrashButton from '../../../Components/Ui/TrashButton';
import { useState } from 'react';

const Page = () => {
    const {t} = useTranslation(); 
    const [pop, setPop] = useState(NotificationArray)

    const handleDeleteAll = () => {
        setPop([])
    }
    
  return (
    <div className='notification_container'>
        <div className='notification_header'>
            <h3>{t("header.notifications")}</h3>
            <TrashButton 
             onClick={handleDeleteAll} 
             name='delete_all'/>
        </div>
        <Divider/>
        <div className="notification_body">
            {pop?.map((not:notifications)=>(
                <Card
                 id={not?.id}
                 name={not?.name} 
                 date={not?.date} 
                 pop={pop}
                 setPop={setPop}
                 image={not?.image}/>
            ))}
        </div>
    </div>
  )
}

export default Page