import { UserBadge } from "@/app/UserBadge";
import "./TrailRegister.css";
import "@/app/EditButtons.css";

type Walker = {
  user: {
    did: string;
    handle: string;
    avatar?: string;
  };
  isYou: boolean;
  key: string;
};

type Props = {
  mode: "walked" | "completed";
  walkers: Walker[];
  onDelete: (key: string) => void;
};

export function TrailRegister({ mode, walkers, onDelete }: Props) {
  const hasActivity = walkers.length > 0;
  return (
    <div className="TrailRegister">
      {hasActivity ? (
        <div className="TrailRegister-list">
          {walkers.map((walker) => {
            return (
              <div
                key={walker.key}
                className={`TrailRegister-entry ${walker.isYou ? "TrailRegister-entry--deletable" : ""}`}
              >
                <UserBadge
                  handle={walker.user.handle}
                  avatar={walker.user.avatar}
                  name={walker.user.handle}
                />
                <span className="TrailRegister-action">
                  {mode === "completed" ? "walked this trail" : "walked here"}
                </span>
                {walker.isYou && (
                  <div className="TrailRegister-deleteButton">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        onDelete(walker.key);
                      }}
                      className="edit-btn-delete"
                      title={mode === "completed" ? "delete this completion" : "forget this trail"}
                    >
                      ×
                    </button>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      ) : (
        <p className="TrailRegister-empty">no one has walked here... yet</p>
      )}
    </div>
  );
}
