import React from "react";
import { InfoTooltip } from "../Tooltip/InfoTooltip";

export interface FooterNameColumnProps {
  name?: string;
  tooltip?: React.ReactNode;
}

const FooterNameColumn: React.FC<FooterNameColumnProps> = ({
  name,
  tooltip,
}) => {
  if (typeof name === "undefined") {
    return null;
  }

  return (
    <>
      <span className="bold">{name}</span>
      {tooltip && (
        <>
          &nbsp;
          <InfoTooltip className="icon--small">{tooltip}</InfoTooltip>
        </>
      )}
    </>
  );
};

FooterNameColumn.displayName = "FooterNameColumn";

export default FooterNameColumn;