import type { Label } from '../api/types';
import { useResolvedLabels } from '../labels/useResolvedLabels';
import './UserLabels.css';

interface UserLabelsProps {
  labels: Label[] | undefined;
}


export default function UserLabels({ labels }: UserLabelsProps) {
  const resolved = useResolvedLabels(labels);

  if (resolved.length === 0) return null;

  return (
    <div className="user-labels">
      {resolved.map((label, i) => (
        <span
          key={`${label.val}:${label.labelerName}:${i}`}
          className="user-label"
          title={`Label from ${label.labelerName}: ${label.displayName}`}
        >
          {label.labelerAvatar ? (
            <img
              className="user-label-icon"
              src={label.labelerAvatar}
              alt=""
              loading="lazy"
            />
          ) : (
            <span className="user-label-icon-placeholder">•</span>
          )}
          <span className="user-label-text">{label.displayName}</span>
        </span>
      ))}
    </div>
  );
}