import { useState } from "react";
import Avatar from "../common/Avatar";
import { formatUTCToLocalTime } from "../../utils/dateUtils";

const ExpenseStatusLogs = ({ data }) => {
  const [visibleCount, setVisibleCount] = useState(4);

  const logsToShow = data?.expenseLogs?.slice(0, visibleCount) || [];

  const handleShowMore = () => {
    setVisibleCount((prev) => prev + 4);
  };

  return (
    <>
      <div className="row g-2">
        {logsToShow.map((log, index) => (
          <div
            key={log.id}
            className="col-12 d-flex align-items-start mb-2"
          >
            <Avatar
              size="xs"
              firstName={log.updatedBy.firstName}
              lastName={log.updatedBy.lastName}
            />

            <div className="flex-grow-1">
              <div className="d-flex justify-content-start">
                <div className="text-start">
                  <div >
                    <div className="flex">
                      <span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
                      <small className="text-secondary text-tiny ms-2">
                        <em>{log.action}</em>
                      </small>
                      <span className="text-tiny text-secondary d-block small">{formatUTCToLocalTime(log?.updateAt)}</span>
                    </div>
                  </div>
                  <div className="d-flex align-items-center text-muted small mt-1">
                    <span className="small">{log.comment}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {data?.expenseLogs?.length > visibleCount && (
        <div className="text-center my-1">
          <button
            className="btn btn-xs btn-outline-primary"
            onClick={handleShowMore}
          >
            Show More
          </button>
        </div>
      )}
    </>
  );
};

export default ExpenseStatusLogs;