import type { AuthUser } from "@domainops/shared-types";
import { Tag } from "antd";
import { titleCase } from "@/lib/utils/text";

/**
 * Who performed an action: display name plus the unique username and role,
 * so two people can never be mistaken for each other in a log.
 */
export function ActorLabel({ actor }: { actor: AuthUser | null | undefined }) {
  if (!actor) return <span>System</span>;

  return (
    <div className="dms_actor_label">
      <span className="font-medium">{actor.name}</span>
      <div className="text-xs text-gray-500 flex items-center gap-1 flex-wrap">
        <span>@{actor.username}</span>
        {actor.role?.label && <Tag style={{ marginInlineEnd: 0 }}>{titleCase(actor.role.label.replace(/[_-]+/g, " "))}</Tag>}
      </div>
    </div>
  );
}