import React from "react";
import Avatar from "../common/Avatar";

const JobStatusLog = ({ data }) => {
  return (
    <div className="card shadow-none p-0">
      <div className="card-body p-0">
        <div className="list-group">
          {data?.map((item) => (
            <div
              key={item.id}
              className="list-group-item border-0 border-bottom p-1"
            >
              <div className="d-flex justify-content-between">
                <div>
                  <span className="fw-semibold">
                    {item.nextStatus?.displayName ??
                      item.status?.displayName ??
                      "Status"}
                  </span>
                </div>

                {/* <span className="badge bg-primary">
                  Level {item.nextStatus?.level ?? item.status?.level}
                </span> */}
              </div>
              <div className="d-flex align-items-start mt-2 mx-0 px-0">
                <Avatar
                  firstName={item.updatedBy?.firstName}
                  lastName={item.updatedBy?.lastName}
                />
                <div className="">
                  <div className="d-flex flex-row gap-3">
                    <span className="fw-semibold">
                      {item.updatedBy?.firstName} {item.updatedBy?.lastName}
                    </span>
                    <span className="text-secondary">
                      {/* <em>{formatUTCToLocalTime(item?.createdAt, true)}</em> */}
                    </span>
                  </div>
                  <div className="text-muted text-secondary">
                    {item?.updatedBy?.jobRoleName}
                  </div>
                  <div className="text-wrap">
                    <p className="mb-1 mt-2 text-muted">{item.comment}</p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default JobStatusLog;