const HELP_ICON_WIDTH = {
  s: 16,
  m: 20,
  l: 24,
};

export const HelpIcon = ({
  size = 'm',
  content,
}: {
  size?: keyof typeof HELP_ICON_WIDTH;
  content?: string;
}) => {
  if (!content) return null;
  return (
    <div
      className="hover"
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 'none',
        width: HELP_ICON_WIDTH[size],
        aspectRatio: '1/1',
        borderRadius: '50%',
        cursor: 'help',
        userSelect: 'none',
      }}
      title={content}
    >
      <span>?</span>
    </div>
  );
};