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

const Timeline = ({ items = [], transparent = true }) => {
  return (
    <ul
      className={`timeline ${
        transparent ? "timeline-transparent text-start" : ""
      }`}
    >
      {items.map((item) => (
        <li
          key={item.id}
          className={`timeline-item ${
            transparent ? "timeline-item-transparent" : ""
          }`}
        >
          <span
            className={`timeline-point timeline-point-${
              item.color || "primary"
            }`}
          ></span>

          <div className="timeline-event">
            <div className="timeline-header mb-3 d-flex justify-content-between">
              <h6 className="mb-0 text-body">{item.title}</h6>
              <small className="text-body-secondary">{item.timeAgo}</small>
            </div>

            {item.description && <p className="mb-2">{item.description}</p>}

            {item.attachments && item.attachments.length > 0 && (
              <div className="d-flex align-items-center mb-2">
                {item.attachments.map((att, i) => (
                  <div
                    key={i}
                    className="badge bg-lighter rounded d-flex align-items-center gap-2 p-2"
                  >
                    {att.icon && (
                      <img
                        src={att.icon}
                        alt="file"
                        width="15"
                        className="me-2"
                      />
                    )}
                    <span className="h6 mb-0">{att.name}</span>
                  </div>
                ))}
              </div>
            )}

            {item.users && item.users.length > 0 && (
              <div className="d-flex flex-wrap align-items-center mb-2">
                <ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0">
                  {item.users.map((user, i) => (
                    <li key={i} className="avatar me-1" title={user.name}>
                      {user.avatar ? (
                        <img
                          src={user.avatar}
                          alt={user.name}
                          className="rounded-circle"
                          width="32"
                          height="32"
                        />
                      ) : (
                        <Avatar
                          firstName={user.firstName}
                          lastName={user.lastName}
                        />
                      )}
                    </li>
                  ))}
                </ul>

                {item.users?.length === 1 && (
                  <div className="m-0">
                    <p className="mb-0 small fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
                    <small>{item.users[0].role}</small>
                  </div>
                )}
              </div>
            )}
          </div>
        </li>
      ))}
    </ul>
  );
};

export default Timeline;