import React from "react";
import ActivityIcon from "../common/ActivityIcon";
import AddToPersonalizedButton from "../common/AddToPersonalizedButton";
import "../styles/RecentActivities.css";

const RecentActivities = ({ activities, widgetId }) => {
  return (
    <div className="recent-activities-container recent-activities-container--has-add-btn">
      {widgetId && <AddToPersonalizedButton widgetId={widgetId} />}
      <h2 className="recent-activities-title">Recent Activities</h2>
      <div className="recent-activities-list">
        {activities.map((activity, index) => (
          <div
            key={activity.id}
            className="activity-item"
            style={{ animationDelay: `${index * 0.1}s` }}
          >
            <div
              className={`activity-icon ${
                activity.type === "finding" ? "finding" : ""
              }`}
            >
              <ActivityIcon type={activity.type} />
            </div>
            <div className="activity-content">
              <div className="activity-action">{activity.action}</div>
              <div className="activity-details">
                {activity.user} • {activity.site} • {activity.time}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RecentActivities;
