import { AlignLeft } from "lucide-react";
import { observer } from "mobx-react";
// hooks
import { useIssueDetail } from "@/hooks/store/use-issue-detail";
// components
import { IssueActivityBlockComponent, IssueLink } from "./";

type TIssueDescriptionActivity = {
  activityId: string;
  showIssue?: boolean;
  ends: "top" | "bottom" | undefined;
};

export const IssueDescriptionActivity = observer(
  function IssueDescriptionActivity(props: TIssueDescriptionActivity) {
    const { activityId, showIssue = true, ends } = props;
    // hooks
    const {
      activity: { getActivityById },
    } = useIssueDetail();

    const activity = getActivityById(activityId);

    if (!activity) return <></>;
    return (
      <IssueActivityBlockComponent
        icon={
          <AlignLeft size={14} className="text-secondary" aria-hidden="true" />
        }
        activityId={activityId}
        ends={ends}
      >
        <>
          updated the description
          {showIssue ? ` of ` : ``}
          {showIssue && <IssueLink activityId={activityId} />}.
        </>
      </IssueActivityBlockComponent>
    );
  },
);