import React from "react";

/**
 *
 * Announcement card component to list out the announcements
 * @module Announcement/Card
 * @param dat
 * @returns {JSX.Element}
 */
const AnnouncementCard = ({ dat }) => {
  return (
    <div className="announcement-card">
      {/* Left side with thumbnail image */}
      <div className="thumbnail">
        <ion-icon name="megaphone"></ion-icon>
      </div>

      {/* Right side with announcement title and content */}
      <div className="announcement-content">
        <h3 className="announcement-title">{dat?.title || ""}</h3>

        <p className="published-date">
          <div className="me-3">
            <ion-icon name="calendar-clear-outline"></ion-icon>
          </div>{" "}
          <small> {dat?.created || ""}</small>
        </p>
      </div>
    </div>
  );
};

export default AnnouncementCard;