export function ProtocolLinks({
  atUri,
  leafletUrl,
  avatarUrl,
  className,
  ariaLabel = "Protocol versions",
}: {
  atUri: string;
  leafletUrl: string;
  avatarUrl?: string;
  className?: string;
  ariaLabel?: string;
}) {
  return (
    <nav
      class={`protocol-links${className ? ` ${className}` : ""}`}
      aria-label={ariaLabel}
    >
      <a
        class="protocol-link-leaflet"
        href={leafletUrl}
        target="_blank"
        rel="noopener"
      >
        leaflet
      </a>
      <a class="protocol-mark" href="/" aria-label="Home">
        {avatarUrl ? <img src={avatarUrl} alt="" /> : <span aria-hidden="true" />}
      </a>
      <a
        class="protocol-link-atproto"
        href={`https://atproto.md/${atUri}`}
        target="_blank"
        rel="noopener"
        aria-label="View the AT Protocol record"
      >
        at://
      </a>
    </nav>
  );
}