import Link from "next/link";
import "./UserBadge.css";

interface UserBadgeProps {
  handle: string;
  avatar?: string;
  name?: string;
  showAvatar?: boolean;
  asLink?: boolean;
}

export function UserBadge({ handle, avatar, showAvatar = true, asLink = true }: UserBadgeProps) {
  const content = (
    <>
      {showAvatar && avatar && <img src={avatar} alt={handle} className="UserBadge-avatar" />}
      <span className="UserBadge-handle">@{handle}</span>
    </>
  );

  if (!asLink) {
    return <span className="UserBadge UserBadge--nolink">{content}</span>;
  }

  return (
    <Link href={`/@${handle}`} className="UserBadge" prefetch={false}>
      {content}
    </Link>
  );
}
