import { observer } from "mobx-react";

import type { TProjectActivity } from "@buzzwaretech/types";
import { ActivityBlockComponent } from "./activity-block";
import { iconsMap, messages } from "./helper";

type TActivityItem = {
  activity: TProjectActivity;
  showProject?: boolean;
  ends?: "top" | "bottom" | undefined;
};

export const ActivityItem = observer(function ActivityItem(
  props: TActivityItem,
) {
  const { activity, ends } = props;

  if (!activity) return null;

  const activityType = activity.field;
  if (!activityType) return null;

  const { message, customUserName } = messages(activity);
  const icon = iconsMap[activityType] || iconsMap.default;

  return (
    <ActivityBlockComponent
      icon={icon}
      activity={activity}
      ends={ends}
      customUserName={customUserName}
    >
      <>{message}</>
    </ActivityBlockComponent>
  );
});