import { cn } from "@/lib/utils";

const AVATAR_COLORS = [
  "bg-emerald-100 text-emerald-800",
  "bg-purple-100 text-purple-800",
  "bg-amber-100 text-amber-800",
  "bg-blue-100 text-blue-800",
  "bg-pink-100 text-pink-800",
];

/**
 * MemberRow
 * @param {object} member      - User object from API
 * @param {number} colorIndex  - Index to pick avatar color from palette
 */
export default function MemberRow({ member, colorIndex = 0 }) {
  const fullName = member.personal_info?.name?.full_name ?? member.email ?? "";
  const initials = fullName
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()
    .slice(0, 2) || "?";

  const color = AVATAR_COLORS[colorIndex % AVATAR_COLORS.length];

  return (
    <div className="flex items-center gap-3 px-4 py-3">
      {/* Avatar */}
      <div className={cn(
        "w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium shrink-0",
        color
      )}>
        {initials}
      </div>

      {/* Info */}
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium truncate">{fullName}</p>
        <p className="text-xs text-muted-foreground truncate">{member.email}</p>
      </div>

      {/* Active badge */}
      <span className={cn(
        "text-[11px] font-medium px-2 py-0.5 rounded shrink-0",
        member.is_active
          ? "bg-emerald-50 text-emerald-800"
          : "bg-muted text-muted-foreground"
      )}>
        {member.is_active ? "active" : "inactive"}
      </span>
    </div>
  );
}