import React from "react";
import classNames from "classnames";

import Announcement from "./Announcement";

const AnnouncementList = ({
  items,
  className,
  canRunActions,
  onDelete,
  onEdit,
  onSeen,
}) => {
  const buildHandler = (responderFn) => (announcement) => (evt) => {
    evt.preventDefault();
    responderFn(announcement);
  };

  const onAnnouncementEdit = buildHandler(onEdit);
  const onAnnouncementDelete = buildHandler(onDelete);

  const onAnnouncementSeen = (announcement) => () => {
    onSeen(announcement);
  };

  return (
    <div className={classNames("space-y-px", className)}>
      {items.map((item) => (
        <Announcement
          key={item.id}
          datetime={item.datetime}
          type={item.type}
          content={item.content}
          link={item.link}
          seen={item.seen}
          canRunActions={canRunActions}
          onEdit={onAnnouncementEdit(item)}
          onDelete={onAnnouncementDelete(item)}
          onSeen={onAnnouncementSeen(item)}
        />
      ))}
    </div>
  );
};

export default AnnouncementList;