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;
