import React, { useMemo } from "react";
import Timeline from "../../common/Timeline";
import { getColorNameFromHex } from "../../../utils/appUtils";

const JobStatusLog = ({ data }) => {
  // Prepare timeline items
  const timelineData = useMemo(() => {
    if (!data) return [];
    return data
      .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
      .map((log) => ({
        id: log.id,
        title: log.nextStatus?.displayName || log.status?.displayName || "Status Updated",
        description: log.nextStatus?.description || "",
        timeAgo: log.updatedAt,
        color: getColorNameFromHex(log.nextStatus?.color) || "primary",
        userComment: log.comment,
        users: log.updatedBy
          ? [
            {
              firstName: log.updatedBy.firstName || "",
              lastName: log.updatedBy.lastName || "",
              role: log.updatedBy.jobRoleName || "",
              avatar: log.updatedBy.photo || null,
            },
          ]
          : [],
      }));
  }, [data]);

  return (
    <div className="card shadow-none p-0">
      <div className="card-body p-3">
        <div className="timeline-container overflow-auto" style={{ maxHeight: "400px" }}>
          <Timeline items={timelineData} transparent={true} />
        </div>
      </div>
    </div>
  );
};

export default JobStatusLog;