/**
 * Styled clickable text wrapper for popular request items.
 *
 * Angular equivalent: `RequestInfoComponent` (request-info.component.ts)
 * — a simple styled `<span>` with blue link color and pointer cursor.
 */

import type { ReactNode, MouseEvent } from "react";
import "./RequestInfo.scss";

export interface RequestInfoProps {
  children: ReactNode;
  onClick: (e: MouseEvent<HTMLSpanElement>) => void;
}

export function RequestInfo({ children, onClick }: RequestInfoProps): JSX.Element {
  return (
    <span
      className="request-info"
      role="button"
      tabIndex={0}
      onClick={onClick}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onClick(e as unknown as MouseEvent<HTMLSpanElement>);
        }
      }}
    >
      {children}
    </span>
  );
}
